jQuery实现瀑布流

             1
            <
            div 
            id
            ="container"
            >
             2
            <
            div 
            class
            ="box"
            >
             3
            <
            div 
            class
            ="content"
            >
             4
            <
            img 
            src
            ="../img/1.jpg"
            >
             5
            </
            div
            >
             6
            </
            div
            >
             7
            <
            div 
            class
            ="box"
            >
             8
            <
            div 
            class
            ="content"
            >
             9
            <
            img 
            src
            ="../img/9.jpg"
            >
            10
            </
            div
            >
            11
            </
            div
            >
            12
            <
            div 
            class
            ="box"
            >
            13
            <
            div 
            class
            ="content"
            >
            14
            <
            img 
            src
            ="../img/11.jpg"
            >
            15
            </
            div
            >
            16
            </
            div
            >
            17
            <
            div 
            class
            ="box"
            >
            18
            <
            div 
            class
            ="content"
            >
            19
            <
            img 
            src
            ="../img/12.jpg"
            >
            20
            </
            div
            >
            21
            </
            div
            >
            22
            <
            -- class
            为box可以多复制几个--
            >
            23
            </
            div
            >
        

            1
            <style>

            2
                        *{padding:0;margin:0;}
3            .box{position:relative;float:left;/*position:absolute*/}
4            .content{padding:10px;border:1px solid #ccc;box-shadow: 0 0  5px #ccc;
5            border-radius: 5px;}
6            img{width:190px;height:auto;}
7        </style>

<script>
            $(function(){
                //监听window事件来获取图片加载的位置
                $(window).on("load",function(){
                    imgLoction();
                    var dataInt={‘data‘:[{‘src‘:‘1.jpg‘},{‘src‘:‘2.jpg‘},{‘src‘:‘3.jpg‘},{‘src‘:‘4.jpg‘}]};
            window.onscroll=function(){
                    if(checkscrollside()){
                        $.each( dataInt.data, function( index, value ){
                            var $oPin = $(‘<div>‘).addClass(‘box‘).appendTo( $( "#container" ) );
                            var $oBox = $(‘<div>‘).addClass(‘content‘).appendTo( $oPin );
                            $(‘<img>‘).attr(‘src‘,‘./img/‘ + $( value).attr( ‘src‘) ).appendTo($oBox);
                        });
                        imgLoction();
                    };
                }
                    
                })
            })
            function checkscrollside(){
                var $aPin = $( ".box" );
                var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
                var scrollTop = $( window ).scrollTop()//注意解决兼容性var documentH = $( document ).width();//页面高度return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数            }
            
            
            
            
            function imgLoction(){
                //首先创建一个盒子对象，对应的就是index文件当中的box元素var box=$(".box");
                //获取盒子的宽度==第一个盒子的宽度var boxwidth=box.eq(0).width();
                //获取盒子宽度后看一排能摆放多少个//一排的个数等于当前浏览器窗口的宽度除以每个盒子的宽度,注意除以得到的数是小数，要将其转化为整数var num=Math.floor($(window).width()/boxwidth);
                //定义一个数组来承载储存列中所有盒子的高度,然后获取一排盒子中高度最小的那个var boxArr=[];
                //遍历box之后获取每个盒子的高度
                box.each(function(index,value){//这里的value是盒子对象//console.log(index);//创建一个盒子的高度,用来获取每个盒子的高度var boxheight=box.eq(index).height();
                    //然后 判断：储存第一排中每一个图片的高度，放在数组中储存它if(index<num){
                        boxArr[index]=boxheight;
                        //console.log(boxheight);
                    }else{
                        //获取到高度之后，第二排开始摆放，首先获取到图片最小的一个高度var minboxheight=Math.min.apply(null,boxArr);
                        //console.log(minboxheight);//设置图片的位置，获取第一排中最小图片存放的位置var boxminindex=$.inArray(minboxheight,boxArr);
                        //console.log(boxminindex);//接下来通过位置进行摆放//console.log(value);//获取对象                        $(value).css({
                            "position":"absolute",
                            "top":minboxheight,
                            "left":box.eq(boxminindex).position().left
                        })
                        //然后还要记一个图片摆放的高度
                        boxArr[boxminindex]+=box.eq(index).height();
                    }
                })
                
            }
        </script>