瀑布流源码

 

 

    $().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>