欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-20 10:25:13
...
瀑布流-绝对定位布局,与浮动布局的区别在于

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 }
//是否发出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 = $("
  • jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)_jquery

    11111

  • ")
    //这里开始和浮动布局不一样了。其它部分在调用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)