幾行代碼輕鬆實現瀑布流顯示。

時間 2019-12-05

原文原文鏈接

實現思路：建立左右兩個容器，在數據導入的時候獲取兩個容器的高度，把即將要導入的數據，導進高度低的一個容器便可。html

HTML代碼

<body style="background-color: #f3f3f3;">
    <!-- 商品列表 -->
    <div class="twoRankedBox">
        <ul class="BoxLeft">
                
        </ul>
            
        <ul class="BoxRight">
                
        </ul>
    </div>
</body>

CSS代碼

*{
    padding:0px;
    margin:0px;
    list-style: none;
    font-style:normal;
    font-family: arial;
    font-family: Microsoft YaHei,arial;
}
.twoRankedBox{
    margin:6px 8px;
    overflow: hidden;
    padding-bottom:25px;
}
.twoRankedBox ul{
    width:49%;
    float: left;
}
.twoRankedBox ul:last-child{
    margin-left:2%;
}
.twoRankedBox ul li{
    padding:5px;
    margin-bottom:6px;
    padding-bottom:8px;
    background-color: #FFFFFF;
}
.twoRankedBox ul li p:first-child{
    padding-top:0px;
}
.twoRankedBox ul li p{
    padding-top:4px;
}
.product_picture img{
    display: block;
    width:100%;
}
.product_np{
    overflow: hidden;
    line-height:20px;
}
.product_np a{
    display: block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.product_np a:first-child{
    font-size:0.9em;
    color:#58b7e3;
    width:65%;
    float: left;
}
.product_np a:last-child{
    font-size:0.8em;
    color:#f00;
    float: right;
    width:35%;
    text-align: right;
}
.product_ie{
    font-size:0.8em;
    color:#777;
}

JS代碼

//模擬JSON數據
var json = {
    data:[
        {name:'花瓣小小裙花瓣',price:'128',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_01.jpg'},
        {name:'時尚牛仔短褲',price:'298',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_02.jpg'},
        {name:'白色婚紗',price:'668',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_03.jpg'},
        {name:'綠色防曬衣',price:'218',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_04.jpg'},
        {name:'格紋小短裙',price:'88',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_05.jpg'},
        {name:'復古旗袍',price:'128',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_06.jpg'},
        {name:'花瓣小小裙花瓣',price:'128',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_07.jpg'},
        {name:'時尚牛仔短褲',price:'298',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_08.jpg'},
        {name:'白色婚紗',price:'668',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_09.jpg'},
        {name:'綠色防曬衣',price:'218',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_10.jpg'},
        {name:'格紋小短裙',price:'118',details:'質量超好特別的溫馨，夏天首選。',src:'images/temporary/img_11.jpg'}
    ]
}

//模擬數據導入
for(var i=0;i<json.data.length;i++){
    var chtml = '<li><p class="product_picture"><img src="'+json.data[i].src+'"></p>'
            +'<p class="product_np"><a>'+json.data[i].name+'</a><a>￥'+json.data[i].price+'</a></p>'
            +'<p class="product_ie">'+json.data[i].details+'</p></li>'

    if($('.BoxLeft').height() < $('.BoxRight').height()){
        $('.BoxLeft').append(chtml);
    }else{
        $('.BoxRight').append(chtml);
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。