jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)

jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)

 

瀑布流-绝对定位布局，与浮动布局的区别在于

1.布局不一样：

　　绝对定位：一个UL里面放置所有的绝对定位的LI；

　　浮动布局：多个（一般三四个）UL分布放置LI；

2.AJAX不一样

　　绝对定位：只需要将请求来的JSON数据（当然可以是别的格式的数据），插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置；

　　浮动布置：是将请求来的JSON数据（当然可以是别的格式的数据），分别插入到对应的UL当中，因为有绝对定位，所以不用对LI设置位置。会自动向下排列；

一、功能分析：

　　1.定位每一个LI，即设置每一个LI的TOP和LEFT值；

　　2.将AJAX的数据，放在LI中，插入到UL当中；

二、实现过程：

　　1.设置LI的LEFT；

　　　　在那一列？有了列数再乘以每个LI的宽度，就可以确定LEFT值

　　　　找规律：

　　　　现在我需要三列，那么每一列当中的LI，都有一个共同的列号（自己设置0.1.2或者A.B.C，总之自己对这三列给一个标识）这里设为

　　　　0号第一列

　　　　1号第二列

　　　　2号第三列

　　　　所以每一行，只能放三个LI

　　　　第一个li  在 0号   第二个li 在 1号  第三个li 在 2号

　　　　第四个li  在 0号   第五个li 在 1号  第六个li 在 2号

　　　　所以想到用索引取模,正好可以得出0 1 2 ，0 1 2 ……

　　　　通过这个我们就可以判断LI在那一列；

　　　　index%3 = 0 1 2 ，0 1 2 ……

　　　　为什么要模3,因为要得出三个数的循环。所以以后要想得出这样的循环，都可以考虑取模运算；

　　2.设置TOP的值；

　　　　因为每一列的总高度值都是不一样的。所以我们要设三个变量来存放不同列的高度值。

　　　　为什么要取得这个值？

　　　　1.初次加载的时候LI，的TOP值，是根据当前列高度值来设置的；

2.因为AJAX请求后的数据LI要插入到UL当中，必需知道当前列现在的总高度，然后给新的LI为它的TOP值；

其实中间有很多可以说的。但实在是太长了。我代码中注释也写的很清楚了。有问题可以留言和我交流。！！

要提一点的就是，里面有很多相同的功能，我都写到一个FUNCTION当中，方便调用。例如要设LI的TOP和LEFT，要获取LI的列数，要设置列的总高度。这都是共公的，也是功能块，所以还是单独用函数写出来好；

(function($){
    $.fn.extend({
        waterfall:function(value){
            value=$.extend({
                jsonUrl:"",
                dataType:"",
                cloum:"",
                liWidth:""
            },value)

            //引用包函布瀑布流的DIV对象
             var $this = $(this);

             //存放列的充号
             var colmLeftIndex = 0;

             //用来存放每一列的高度值；
             var liHeight_0 = 0;
             var liHeight_1 = 0;
             var liHeight_2 = 0;

             //设置列的序号
             function getcolums(col){
                colmLeftIndex = col%value.cloum;
             }

             //设置当前列的高度
            function getLiHeight(colIndex,hei){
                     switch(colIndex){
                         case 0:
                         liHeight_0 += hei
                         break;
                         case 1:
                         liHeight_1 += hei;
                         break;
                         case 2:
                         liHeight_2 += hei;
                         break;
                    }
            }

            //设置每一个LI的TOP和LEFT
            function setLiOffset(oli,liH){
                switch(colmLeftIndex){
                        case 0 :
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0});
                            getLiHeight(colmLeftIndex,liH);
                            console.log(liHeight_0);

                        break;
                        case 1:
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1});
                            getLiHeight(colmLeftIndex,liH);
                        break;

                        case 2:
                            oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2});
                            getLiHeight(colmLeftIndex,liH);
                        break;
                 }
            }

            //初次加载时，遍历所有的LI，并定位每一个LI的TOP和LEFT值
            $this.find("li").each(function(index, element){
                //当前LI的引用
                 var $liThis = $(this);
                 //获得当前LI的高度值
                 var liH = $liThis.outerHeight();

                 //获得当前列的序号
                 getcolums(index);

                 //把当前LI的高度值存到相应的列的总高度变量中
                 setLiOffset($liThis,liH)

            });

            //判断每个UL的最后一个LI，是否进入可视区域
            function see(objLiLast){
                    //浏览器可视区域的高度
                    var see = document.documentElement.clientHeight;
                    //滚动条滑动的距离
                    var winScroll = $(this).scrollTop();
                    //每个UL的最后一个LI，距离浏览器顶部的
                    var lastLisee = objLiLast.offset().top
                    return lastLisee < (see+winScroll)?true:false;
            }
            //是否发出AJAX的“开关”；
            var onOff = true;

            $(window).scroll(function(){
                //拖动滚条时，是否发送AJAX的一个“开关”
                $this.children("ul").each(function(index, element) {

                    //引用当前的UL
                    var ulThis = this;
                    //引用最后一个LI
                    var lastLi = $("li:last",ulThis);
                    //调用是否进入可视区域函数
                    var isSee = see(lastLi);

                    if(isSee && onOff){
                        onOff = false;
                        //发送AJAX请求，载入新的图片
                        $.ajax({
                            url:value.jsonUrl,
                            dataType:value.dataType,
                            success:function(data){
                                //对返回JSON里面的list数据遍历
                                $.each(data.list,function(keyList,ovalue){
                                //对LIST里面的SRC数组遍历,取到图片路径
                                $.each(ovalue,function(keySrc,avalue){
                                    $.each(avalue,function(keysrc1,value1){
                                        var $imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>")
                                        //这里开始和浮动布局不一样了。其它部分在调用AJAX的时候，是一样的；因为这里不需要指定插入到那个UL；
                                        $this.children("ul").append($imgLi);

                                        //获取这个新插入到页面中的LI的列的序号
                                        var _liindex = $imgLi.index();
                                        getcolums(_liindex);

                                        //获取这个新插入到页面中的LI的高度值

                                        var _nlih = $imgLi.outerHeight();

                                        //设置当前LI的TOP和LEFT
                                        setLiOffset($imgLi,_nlih);

                                    })
                                })
                                onOff = true;
                                })
                            }
                        })
                    }
                });
            })
        }
    })
})(jQuery)

DEMO下载  （这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV，里面的是APACHE）