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>
View Code

 

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;}
View Code

 

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='width:'+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");
		};