淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2829|回复: 7
收起左侧

CSS3瀑布流产品展示

[复制链接]
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51181

    天猫美工最佳新人热心会员

    QQ
    发表于 2015-4-16 15:26:38 | 显示全部楼层 |阅读模式
    因为店里有旺铺CSS,所以一些代码 需要转换,我相信这个难不倒你们


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <style type="text/css">
    .isotope-item{position: absolute; width: 320px; -moz-transform: translate(0px, 0px);-ms-transform: translate(0px, 0px);-o-transform: translate(0px, 0px);-webkit-transform: translate(0px, 0px); float:left;-moz-transition: all 0s ease 0s;-ms-transition: all 0s ease 0s;-o-transition: all 0s ease 0s;-webkit-transition: all 0s ease 0s; z-index:2; overflow:hidden;}
    .isotope-item:hover .full img{ -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); -webkit-transform: scale(1.2);}
    .isotope-item:hover .content img{ opacity:0.6;}
    .isotope-item:hover .inner_wrap{background-color:#414141;}
    .isotope-item a{-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;}
    .isotope-item a:hover{text-decoration: none;}
    .inner_wrap {background: none repeat scroll 0 0 #171717;padding: 0;position: relative;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;overflow:hidden;z-index:1;}
    .imgHolder{ position:relative;overflow:hidden;}
    .btn-primary{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #1abc9c;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary:hover{background: none repeat scroll 0 0 #fff;color: #1abc9c;}
    .full{border: medium none;padding: 0;}
    .full a {display: block;position: relative;}
    .full a img{display: block;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s; border: 0 none; height: auto; max-width: 100%;vertical-align: middle;}
    .full a:hover cover {opacity: 0.01;}
    .cover{background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);display: block;height: 100%;opacity: 0;position: absolute;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s; width: 100%;z-index: 1;}

    .btn-primary1{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #f39c12;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary1:hover{background: none repeat scroll 0 0 #fff;color: #f39c12;}
    .btn-primary2{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #2ecc71;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary2:hover{background: none repeat scroll 0 0 #fff;color: #2ecc71;}
    .btn-primary3{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #1abc9c;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary3:hover{background: none repeat scroll 0 0 #fff;color: #1abc9c;}
    .btn-primary4{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #d35400;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary4:hover{background: none repeat scroll 0 0 #fff;color: #d35400;}
    .btn-primary5{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #c0392b;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary5:hover{background: none repeat scroll 0 0 #fff;color: #c0392b;}
    .btn-primary6{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #c0392b;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary6:hover{background: none repeat scroll 0 0 #fff;color: #c0392b;}
    .btn-primary7{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #2ecc71;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary7:hover{background: none repeat scroll 0 0 #fff;color: #2ecc71;}
    .btn-primary8{bottom: 0;left: 0;position: absolute;z-index: 2; background:none repeat scroll 0 0 #f39c12;border: medium none;box-sizing: border-box;font-size: 14px;font-weight: 400;line-height: 20px;padding: 0px 30px;-moz-transition: all 0.4s ease 0s;-ms-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;-webkit-transition: all 0.4s ease 0s;border-radius:0;text-transform:uppercase; display:inline-block; cursor:pointer; color:#FFF;}
    .btn-primary8:hover{background: none repeat scroll 0 0 #fff;color: #f39c12;}
    </style>

    <div style="height:1782px;float:left;">
            <div class="isotope-item">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary" target="_blank">EC590系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i2/429413615/TB2e880aVXXXXc4XXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i4/429413615/TB2FFPtaVXXXXarXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区1-1_01" /></a> <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i4/429413615/TB2vjYyaVXXXXacXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区1-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-left:335px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary1" target="_blank">T1A系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i4/429413615/TB28ymxaVXXXXcIXXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2tKzwaVXXXXbZXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区2-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2Ft6xaVXXXXbsXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区2-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-left:670px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary2" target="_blank">T1A系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i2/429413615/TB2DfCzaVXXXXbKXXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                              <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2UqjuaVXXXXXrXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区3-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i4/429413615/TB2WpTwaVXXXXb2XXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区3-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:420px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary3" target="_blank">T1A系列</a>
                                    <div class="full" style="margin:0;">
                                      <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2OMmzaVXXXXbLXXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"> <img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2NS_xaVXXXXa3XXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区4-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2Uz6zaVXXXXX9XXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区4-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:620px;margin-left:335px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary4" target="_blank">EC650系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2BFRZaVXXXXazXpXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2KGPAaVXXXXXxXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区5-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2k1LtaVXXXXazXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区5-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:410px;margin-left:670px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary5" target="_blank">EC590系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2nx45aVXXXXX.XXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i4/429413615/TB2doztaVXXXXXpXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区6-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i2/429413615/TB2hmjyaVXXXXauXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区6-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:1070px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary6" target="_blank">EC290系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2Oi9_bXXXXXa8XpXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2GGfAaVXXXXaSXXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区7-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2ZL2waVXXXXc_XXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区7-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:1035px;margin-left:335px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary7" target="_blank">XT810系列</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2QYF1aVXXXXcTXXXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB25wPwaVXXXXXdXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区8-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i2/429413615/TB2h6zvaVXXXXXZXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区8-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div class="isotope-item" style="margin-top:825px;margin-left:670px;">
                    <div class="inner_wrap">
                            <div class="imgHolder">
                                     <a href="" class="btn-primary8" target="_blank">激光影院</a>
                                    <div class="full" style="margin:0;">
                                             <a href="" target="_blank">
                                            <div class="cover">
                                                    &nbsp;
                                            </div>
                                             <img alt="" src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2RKJYaVXXXXaLXpXXXXXXXXXX_!!429413615.jpg" /></a>
                                    </div>
                            </div>
                            <div class="content">
                                     <a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB22z6AaVXXXXX1XXXXXXXXXXXX_!!429413615.jpg" alt=" 固定区9-1_01" /></a><a href="" target="_blank"><img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2RTLvaVXXXXXwXpXXXXXXXXXX_!!429413615.jpg" alt=" 固定区9-1_02" /></a>
                            </div>
                    </div>
            </div>
            <div style="height:283px;width:320px;float:left;margin-top:1499px;">
        <img src="http://gdp.alicdn.com/imgextra/i3/429413615/TB2qlqKaVXXXXcsXXXXXXXXXXXX_!!429413615.jpg" alt="" border="0" /></div>
            <div style="margin-top:1453px;margin-left:15px;width:320px;float:left;">
        <img src="http://gdp.alicdn.com/imgextra/i4/429413615/TB2ET2gbXXXXXbxXXXXXXXXXXXX_!!429413615.jpg" alt="" border="0" /></div>
            <div style="margin-top:1417px;margin-left:15px;height:365px;width:320px;float:left;">
        <img src="http://gdp.alicdn.com/imgextra/i1/429413615/TB2AdOOaVXXXXXeXXXXXXXXXXXX_!!429413615.jpg" alt="" border="0" /></div>
    </div>
    </body>
    </html>



    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    臭美
    2016-3-15 11:20
  • 签到天数: 118 天

    连续签到: 1 天

    [LV.6]渐入佳境

    3

    主题

    143

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    24489

    最佳新人热心会员

    QQ
    发表于 2015-4-16 16:02:01 | 显示全部楼层
    绝对定位,就是css有点多。
    用我的一生,换你十年天真无邪。
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51181

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-4-16 16:06:25 | 显示全部楼层
    嗯 我没精简代码...实际上很好改  只要查找一下 绝对定位 然后替换一下 就可以了
    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51181

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-4-16 16:17:53 | 显示全部楼层
    情深缘浅 发表于 2015-4-16 16:02
    绝对定位,就是css有点多。

    嗯 我没精简代码...实际上很好改  只要查找一下 绝对定位 然后替换一下 就可以了


    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    吐舌头
    2016-8-18 09:10
  • 签到天数: 325 天

    连续签到: 1 天

    [LV.8]自成一派

    27

    主题

    636

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43157

    发表于 2015-4-16 17:06:45 | 显示全部楼层
    我想看你家店铺
  • TA的每日心情

    2016-9-21 14:06
  • 签到天数: 262 天

    连续签到: 1 天

    [LV.8]自成一派

    5

    主题

    193

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    51181

    天猫美工最佳新人热心会员

    QQ
     楼主| 发表于 2015-4-16 17:11:19 | 显示全部楼层

    http://hisensetv.tmall.com  
    那个效果是很久以前做的了 现在撤掉了

    愿余生有人鲜衣怒马,陪你看烈焰繁花。
  • TA的每日心情
    不爽
    2016-5-12 16:09
  • 签到天数: 35 天

    连续签到: 1 天

    [LV.5]略有小成

    0

    主题

    10

    帖子

    4950

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4950

    最佳新人

    发表于 2015-4-18 13:37:24 | 显示全部楼层
    来学习一下

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    不爽
    2016-1-2 14:26
  • 签到天数: 19 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    2

    主题

    81

    帖子

    5057

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    5057

    发表于 2015-4-29 08:45:15 | 显示全部楼层
    Mystery 发表于 2015-4-16 16:06
    嗯 我没精简代码...实际上很好改  只要查找一下 绝对定位 然后替换一下 就可以了
    ...

    说得很简单一样……让小白情以何堪啊

    http://vgou9.taobao.com/
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-4 14:17 , Processed in 0.128395 second(s), 19 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表