瀑布流源码

 
    $().ready(function(){

t = 0;//计数输出多少个版块

var ps_wp = {
addBlocks:function(){

//随机插入10个版块
for(var i = 0; i < 9; i++){
var src = "../res/0"+i+".jpg";
var insert = $('<li>'+
'<div class="figure">'+
'<img src="../res/01.jpg" alt="" />'+
'<span class="title">图片标题</span>'+
'</div>'+
'</li>');//要插入的版块

insert.children(".figure").children("img").attr({src:src});
insert.children(".figure").children("span").html(t);
insert.appendTo(ps_wp.colWp());

t++;
}

},//插入版块
colWp:function(){
var h;
var shortest = $($(".ps_wp")[0]).height();
var shortele = $($(".ps_wp")[0]);
var elArry = [];
for(var i = 0; i < 3; i++){
var h = $($(".ps_wp")[i+1]).height();
if(shortest > h){
shortest = $($(".ps_wp")[i+1]).height();
}else{
shortest = shortest;
}
}//得出最小高度

for(var i = 0;i < 4; i++){
if($($(".ps_wp")[i]).height() == shortest){
shortele = $($(".ps_wp")[i]);
elArry.push(shortele);
}
}//输出最短板对象

return elArry[0];
},
}//ps_wp end

$(window).scroll(function(){
var clientHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
scrollHeight = $(document).height();
console.log(clientHeight+":"+scrollTop+":"+scrollHeight)
if(clientHeight + scrollTop + 1 >= scrollHeight ){
ps_wp.addBlocks();
}
})//滚动加载

})//瀑布流

//html代码    

   <div id="img_wp" class="img_wp clearfix">
            <ul class="ps_wp">

                <li>
                    <div class="figure">
                        <img src="../res/04.jpg" alt="" />
                    </div>
                </li>
            </ul>
            <ul class="ps_wp">
                <li>
                    <div class="figure">
                        <img src="../res/02.jpg" alt="" />
                    </div>
                </li>
                <li>
                    <div class="figure">
                        <img src="../res/03.jpg" alt="" />

                    </div>
                </li>
                <li>
                    <div class="figure">
                        <img src="../res/04.jpg" alt="" />
                    </div>
                </li>
            </ul>
            <ul class="ps_wp">

                <li>
                    <div class="figure">
                        <img src="../res/03.jpg" alt="" />

                    </div>
                </li>
                <li>
                    <div class="figure">
                        <img src="../res/04.jpg" alt="" />
                    </div>
                </li>
            </ul>
            <ul class="ps_wp">
                <li>
                    <div class="figure">
                        <img src="../res/04.jpg" alt="" />
                    </div>
                </li>
            </ul>
        </div>

原文地址:https://www.cnblogs.com/SCOOL/p/2355376.html