jQuery-瀑布流-浮动布局（一

jQuery-瀑布流-浮动布局（一）(延迟AJAX加载图片)

 

瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

浮动布局:即HTML结构的列，是用浮动方式。

[哇哦-淘宝]http://wow.taobao.com/在线实例!

一、功能分析：

　　1.判断图片是否进入可视区域；

　　2.用AJAX请求服务器数据；

　　3.将数据播入到相应的列队；

二、实现方法：

　　给window的scroll事件l绑定一个处理函数：做如下工作：

　　1.如何判断最后一行的图片，是否进入了可视区域？

　　　　如果：最后一行的某个图片距离浏览器可视区域顶部的距离值  小于  （可视区域的高度+滚动条滑动的距离值）；

　　　　那么：就可以判定这个图片进入了浏览器的可视区域；

　　2.如何用AJAX请求服务器数据;

　　　　$.getJSON()方法，直接请求JSON格式的数据；

　　3.将数据播入到相应的列队；

　　　　使用$.each循环，将对应的JSON数据入到对应的列当中

$(function(){
    //判断每个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的一个“开关”
        $("ul").each(function(index, element) {

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

            if(isSee && onOff){
                onOff = false;
                //发送AJAX请求，载入新的图片
                $.getJSON("test1.js",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>")
                                $("ul").eq(keysrc1).append(imgLi);
                            })
                        })
                        onOff = true;
                    })
                })
            }
        });

    })
})

三、注意事项

　　当在执行AJAX请求的时候，是有数据在传输，所以需要一定的时间，才能获得返回的jSON数据。（有了数据，才能向UL中插入LI）而这个时候，如果用户又一次拖动滚动条，那么上面代码的isSee 还是返回true；所以又会执行AJAX请求。这里我们就需要手动设置一个“开关”，来控制。

　　只有当数据加载完成后，并且都添加进了对应的UL之后，再次拖动时，打开这个“开关”，即onOff设为true;,

　　因为数据加载完成后，意味着每列的UL里面，在最后面又多出了刚通过AJAX添加进来的LI数据，所以可以有再次的AJAX请求。

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