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