主要记录下js内容这块。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterfall</title> <link rel="stylesheet" href="css/waterfall.css"> </head> <body> <div id="waterfall"> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/1.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/2.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/3.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/4.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/5.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/6.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/7.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/8.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/9.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/10.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/11.jpg"> </div> </div> <div class="waterfall-box"> <div class="waterfall-img"> <img src="images/12.jpg"> </div> </div> </div> <script src="js/waterfall.js"></script> </body> </html>
*{ margin: 0; padding:0; } ul,li{ list-style: none; } #waterfall{ position: relative; } .waterfall-box{ float: left; width: 600px; border:1px solid #ccc; box-shadow: 2px 2px 10px #999; margin:10px; padding: 10px; } .waterfall-img img{ display: block; width: 100%; }
上面是HTML+CSS代码
首先要文档加载完，开始运行js
window.onload = fucntion(){
waterFall(‘waterfall’,'waterfall-box');
}
传入瀑布流需要加载的函数，并传入两个参数，一个是最外层的waterfall，还有一个是包含img图片的waterfall-box
然后开始写waterFall函数
function waterFall(parent,child){ var mr = 20;//图片之间的距离 var oParent = document.getElementById(parent); var oChild = getChild(parent,child); //获取浏览器窗口的宽度。 var winW = document.documentElement.clientWidth; //获取单个child的宽度 var boxW = oChild[0].offsetWidth; //获取一排几个box var cls = Math.floor(winW/boxW); //设置parent的属性。 oParent.style.width = (boxW + mr )*cls+'px'; oParent.style.margin ='0 auto'; function minHei(array,n){ var oFristBoxH =[]; for(var i=0;i<array.length;i++){ if(i<n){ oFristBoxH.push(array[i].offsetHeight); }else{ var oFristBoxHmin = Math.min.apply(null,oFristBoxH); var lastMin = minIndex(oFristBoxH,oFristBoxHmin); array[i].style.position = 'absolute'; array[i].style.top = oFristBoxHmin+mr + 'px'; array[i].style.left = array[lastMin].offsetLeft-mr/2+'px'; oFristBoxH[lastMin]+=array[i].offsetHeight+mr; } } }; minHei(oChild,cls) } //获取子元素 function getChild(parent,child){ var oParent = document.getElementById(parent); var odocument = oParent.getElementsByTagName('div'); var oChild =[]; for (var i =0;i<odocument.length;i++){ if (odocument[i].className==child){ oChild.push(odocument[i]); } } return oChild; } //求数组最小值的下标 function minIndex(array,value){ for(var i =0;i<array.length;i++){ if(array[i] == value){ return i; } } } //判断下拉距离 function scrollH(parent,child,list){ var oChild = getChild(parent,child); var lastChild = oChild[oChild.length-1]; var winH = document.documentElement.clientHeight||document.body.clientHeight; var boxH = lastChild.offsetTop +Math.floor(lastChild.offsetHeight/2); var scollTop = document.body.scrollTop||document.documentElement.scrollTop; var scollH = winH + scollTop; if(boxH<scollH &&oChild.length<list.data.length+12){ return true; }else{ return false; } }
最后需要加载的数据代码写进去 模拟一个list数据，里面包含了图片。通过上面判断下拉距离的函数scrollH返回的结果确定是否加载，同事判断数据是否加载完毕，如果数据已经加载完，那么则停止数据加载
如若不然，会重复加载数据。
var list = {data:[ {'img':'1.jpg'}, {'img':'2.jpg'}, {'img':'3.jpg'}, {'img':'4.jpg'}, {'img':'5.jpg'}, {'img':'6.jpg'}, {'img':'7.jpg'}, {'img':'8.jpg'}, {'img':'9.jpg'}, ] } window.onscroll = function(){ var scrollTF = scrollH('waterfall','waterfall-box',list); if(scrollTF){ var oPatent = document.getElementById('waterfall'); for(var i =0;i<list.data.length;i++){ var oBox = document.createElement('div'); oBox.className = 'waterfall-box'; oPatent.appendChild(oBox); var oimgBox = document.createElement('div'); oimgBox.className = 'waterfall-img'; oBox.appendChild(oimgBox); var oImg = document.createElement('img'); oImg.src = 'images/'+ list.data[i].img; oimgBox.appendChild(oImg); waterFall('waterfall','waterfall-box'); } } }
以上则完成了瀑布流的设计