瀑布流布局

一、瀑布流布局

Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

二、实现方式

1.绝对定位：一种最优秀的方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整;

<div id="main'>

<div class="imgbox">

<div class="pic"> <img src=""></div>

</div>

</div>

$(window ).on("load",function(){

waterfall();
var dataInt={
   'data': [
       {
           'src': '1.jpg'
       },
       {
           'src': '11.jpg'
       },
       {
           'src': '3.jpg'
       },
       {
           'src': '4.jpg'
       },
       {
           'src': '5.jpg'
       },
       {
           'src': '6.jpg'
       }
   ]
};
//检测是否具备加载图片
$(window).scroll(function(){
if(cheakscroll){
$.each(dataInt.data, function( index, value ){
               var $oPin = $('<div>').addClass('imgbox').appendTo( $( "#main" ) );
               var $oBox = $('<div>').addClass('pic').appendTo($oPin );
               //console.log($(value).attr( 'src'));
               $('<img>').attr('src','./images/' + $(value).attr( 'src') ).appendTo($oBox);

});
           waterfall();
}
})
})

function waterfall(){
var $imgbox= $( "#main>div");
var $iwidth= $imgbox.eq(0).outerWidth();
var num = Math.floor( $( window ).width() / $iwidth);//每行中能容纳的imgbox个数【窗口宽度除以一个块框宽度】
$("#main").css({'width' : $iwidth * num,'margin': '0 auto'});
    var hArr=[];//存放图片盒子的高度
    $imgbox.each(function(index,value){
    if(index<num){
    hArr[index] = $imgbox.eq(index).outerHeight();
    }else{
    var minH = Math.min.apply( null,hArr)
    var minHIndex = $.inArray( minH,hArr)
    //console.log(minHIndex)
    $(value).css({
                'position': 'absolute',
                'top': minH +'px',
                'left': $iwidth * minHIndex+'px'
            })
            hArr[minHIndex]+=$imgbox.eq(index).outerHeight();
    }
       })
}

//检查是否滚动到了最后一张数据块
function cheakscroll(){
var $lastimgbox=$('#main>div').last();
var lastimgboxdis=$lastimgbox.offset().top+Math.floor($lastimgbox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastimgboxdis>scrollTop+documentH)? true: false;
 }

三、解释说明

$(document).ready(function(){
    ...code...
})

$(document).load(function(){
    ...code...
})

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。