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

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