瀑布流页面实现

瀑布流实现

<div id="contain">
       <div class="box"><img src="images/image1.jpg" /></div>
       <div class="box"><img src="images/image2.jpg" /></div>
       <div class="box"><img src="images/image3.jpg" /></div>
       <div class="box"><img src="images/image4.jpg" /></div>
       <div class="box"><img src="images/image5.jpg" /></div>
       <div class="box"><img src="images/image6.jpg" /></div>
       <div class="box"><img src="images/image1.jpg" /></div>
       <div class="box"><img src="images/image2.jpg" /></div>
       <div class="box"><img src="images/image3.jpg" /></div>
       <div class="box"><img src="images/image6.jpg" /></div>
       <div class="box"><img src="images/image4.jpg" /></div>
       <div class="box"><img src="images/image3.jpg" /></div>
       <div class="box"><img src="images/image5.jpg" /></div>
       <div class="box"><img src="images/image1.jpg" /></div>
       <div class="box"><img src="images/image2.jpg" /></div>
       <div class="box"><img src="images/image4.jpg" /></div>
  </div>

$(window).on('load',function(){
    waterFull()
})
function waterFull(){
   // 计算当前可视窗口一行可以放置几个标签
    var col=parseInt($(window).width()/$('.box').outerWidth());
    var arrayHeight=[];
    $.each($('.box'),(index,item)=>{
        if(index<col){
          arrayHeight[index]=$(item).outerHeight();
          $(item).css({
            position:'absolute',
            left:index*$(item).outerWidth(),
            top:0,
        })
        }else{
            // 计算最小高度,然后得到最小高度的索引，把对应的标签定位
            var minH = Math.min(...arrayHeight);
            var minIndex = arrayHeight.findIndex(item=>item===minH);
            $(item).css({
                position:'absolute',
                left:minIndex*$(item).outerWidth(),
                top:minH+'px',
            })
        }
        arrayHeight[minIndex]+=$(item).outerHeight()
    })
}
window.onresize = function(){
    waterFull()
}