JS原生效果 实现：
HTML页面布局：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link href="css/style.css" type="text/css" rel="stylesheet"/> 7 <script type="text/javascript" src="js/js.js"></script> 8 </head> 9 <body> 10 <div id="main"> 11 <div class="box"> 12 <div class="pic"> 13 <img src="img/1.jpg" /> 14 </div> 15 </div> 16 <div class="box"> 17 <div class="pic"> 18 <img src="img/2.jpg" /> 19 </div> 20 </div> 21 <div class="box"> 22 <div class="pic"> 23 <img src="img/3.jpg" /> 24 </div> 25 </div> 26 <div class="box"> 27 <div class="pic"> 28 <img src="img/4.jpg" /> 29 </div> 30 </div> 31 <div class="box"> 32 <div class="pic"> 33 <img src="img/5.jpg" /> 34 </div> 35 </div> 36 <div class="box"> 37 <div class="pic"> 38 <img src="img/6.jpg" /> 39 </div> 40 </div> 41 <div class="box"> 42 <div class="pic"> 43 <img src="img/7.jpg" /> 44 </div> 45 </div> 46 <div class="box"> 47 <div class="pic"> 48 <img src="img/8.jpg" /> 49 </div> 50 </div> 51 <div class="box"> 52 <div class="pic"> 53 <img src="img/9.jpg" /> 54 </div> 55 </div> 56 <div class="box"> 57 <div class="pic"> 58 <img src="img/10.jpg" /> 59 </div> 60 </div> 61 <div class="box"> 62 <div class="pic"> 63 <img src="img/11.jpg" /> 64 </div> 65 </div> 66 <div class="box"> 67 <div class="pic"> 68 <img src="img/12.jpg" /> 69 </div> 70 </div> 71 <div class="box"> 72 <div class="pic"> 73 <img src="img/13.jpg" /> 74 </div> 75 </div> 76 <div class="box"> 77 <div class="pic"> 78 <img src="img/14.jpg" /> 79 </div> 80 </div> 81 <div class="box"> 82 <div class="pic"> 83 <img src="img/15.jpg" /> 84 </div> 85 </div> 86 <div class="box"> 87 <div class="pic"> 88 <img src="img/16.jpg" /> 89 </div> 90 </div> 91 <div class="box"> 92 <div class="pic"> 93 <img src="img/17.jpg" /> 94 </div> 95 </div> 96 <div class="box"> 97 <div class="pic"> 98 <img src="img/18.jpg" /> 99 </div> 100 </div> 101 <div class="box"> 102 <div class="pic"> 103 <img src="img/19.jpg" /> 104 </div> 105 </div> 106 <div class="box"> 107 <div class="pic"> 108 <img src="img/20.jpg" /> 109 </div> 110 </div> 111 <div class="box"> 112 <div class="pic"> 113 <img src="img/21.jpg" /> 114 </div> 115 </div> 116 117 118 </div> 119 </body> 120 </html>
CSS样式效果：
1 * {margin: 0;padding: 0;} 2 img{display: block;} 3 #main{position: relative;} 4 .box{padding: 15px 0 0 15px;float: left;} 5 .pic{padding: 10px;border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; display: block;} 6 .pic img{width: 165px;height: auto;}
JS实现：
1、将main下所有的class为box的元素取出来，封装一个获取class的一个函数 getByClass();
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=[];//用来存储获取到的所有的class为box的元素
oElements=parent.getElementsByTagName("*");
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
};
};
return boxArr;
};
2、计算页面当中，显示多少列（页面宽/box的宽）
var oBoxW=oBoxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽
oParent.style.cssText=''+oBoxW*cols+'px;margin:0 auto;';
3、对页面 图片进行定位
注：第一排图片是不需要进行定位的，但是第二行的第一张图片要出现在上一行当中盒子最矮的下面，紧接着第八张依次排列上一行当中盒子最矮的下面！
4、定义一个数组，存放页面上每列高度的数组！
var hArr=[];//存放每一列高度的数组
最开始，数组中存放的是第一行中每列的高度值，之后就是存放着每一列的所有高度值的总和！
1 for(var i=0;i<oBoxs.length;i++){//遍历所有 class为box的 盒子 2 if(i<cols){//如果i小于列数 3 hArr.push(oBoxs[i].offsetHeight);//那么 就把这些盒子的高度存放在hArr数组里 4 }else{ 5 var minH=Math.min.apply(null,hArr); 6 var index=getMinhIndex(hArr,minH); 7 oBoxs[i].style.position='absolute'; 8 oBoxs[i].style.top=minH+'px'; 9 oBoxs[i].style.left=oBoxW*index+'px'; 10 11 hArr[index]+=oBoxs[i].offsetHeight;//修改列的高度 12 }; 13 };
5、判断数组中最小的值：
var minH=Math.min.apply(null,hArr);
求出最小值在数组中的索引值 :
遍历数组中每一个值，拿每一个值跟val比较，如果 相等，则该索引值就是我们需要的
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
};
6、拖动滚动条，不断加载剩下的图片！并不是拖动了滚动条，我们 就 需要 加载数据，我们需要检测一下，是否具备加载数据块的条件！（检测最后一张图片）
当我们拖动滚动条的时候，最后一张图片还未进入可视区域内，是不需要加载图片的！
当最后一张图片进入到 可视区域高度的一半的时候，开始加载图片！
判断当最后一张图片高度的一半距离页面顶部的距离 < 滚动条滚动的距离+页面可是的区域 成立的时候，开始加载图片！
//检测是否具备了滚动条加载数据的条件
function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
var height=document.body.clientHeight || document.documentElement.clientHeight;
return (lastBoxH<scrollTop+height)?true:false;
};
window.onscroll=function(){
if(checkScrollSlide){
var oParent=document.getElementById('main');
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement("div");
oBox.className='box';
oParent.appendChild(oBox);
var oPic=document.createElement("div");
oPic.className='pic';
oBox.appendChild(oPic);
var oImg=document.createElement("img");
oImg.src='img/'+dataInt.data[i].src;
oPic.appendChild(oImg);
};
waterfall("main","box");
};