您的位置：首页 > Web前端 > JavaScript

实现网页中常见的瀑布流原理

2017-04-04 11:16 225 查看
（每次代码传到csdn博客里都会显得特别乱，以后传图片算了.........）瀑布流就是将用户上传的图片一列一列显示在页面上，但是每张图片可能高度不一样，如果不按一定规律添加图片，会造成有的一列图片特别长，有的一片特别短，因此我们每次往列表里添加图片时，都会往最矮的那个列表添加图片；入下图：3是最矮的那个列表，因此我们往它下面加图，后面的每一次加图都是这样往最矮的一个列表里加图；接下来用代码解释它吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}

/*#box {*/
/*width: 1152px;*/
/*margin: 0 auto;*/
/*}*/

img {
vertical-align: middle;
}

ul, li {
list-style: none;
}

#box ul {
/*padding: 5px;*/
/*border: 1px solid #ccc;*/
float: left;
list-style: none;
}

</style>
</head>
<body>
<div id="box">
</div>

</body>
</html>
<script>
这里不用ajax在服务器获取数据了，我们就自己建个假的数据吧；
	datas里面代表每次服务器给我们发送的数据var datas = [{"src": "images/P_000.jpg", "height": 288},{"src": "images/P_001.jpg", "height": 288},{"src": "images/P_002.jpg", "height": 288},{"src": "images/P_003.jpg", "height": 129},{"src": "images/P_004.jpg", "height": 284},{"src": "images/P_005.jpg", "height": 253},{"src": "images/P_006.jpg", "height": 245},{"src": "images/P_007.jpg", "height": 343},{"src": "images/P_008.jpg", "height": 238},{"src": "images/P_009.jpg", "height": 159},{"src": "images/P_010.jpg", "height": 289},{"src": "images/P_011.jpg", "height": 127},{"src": "images/P_012.jpg", "height": 282},{"src": "images/P_013.jpg", "height": 144},{"src": "images/P_014.jpg", "height": 269},{"src": "images/P_015.jpg", "height": 282},{"src": "images/P_016.jpg", "height": 142},{"src": "images/P_017.jpg", "height": 279},{"src": "images/P_018.jpg", "height": 289},{"src": "images/P_019.jpg", "height": 262},{"src": "images/P_020.jpg", "height": 274},{"src": "images/P_000.jpg", "height": 288},{"src": "images/P_001.jpg", "height": 288},{"src": "images/P_002.jpg", "height": 288},{"src": "images/P_003.jpg", "height": 129},{"src": "images/P_004.jpg", "height": 284},{"src": "images/P_005.jpg", "height": 253},{"src": "images/P_006.jpg", "height": 245},{"src": "images/P_007.jpg", "height": 343},{"src": "images/P_008.jpg", "height": 238},{"src": "images/P_009.jpg", "height": 159},{"src": "images/P_010.jpg", "height": 289},{"src": "images/P_011.jpg", "height": 127},{"src": "images/P_012.jpg", "height": 282},{"src": "images/P_013.jpg", "height": 144},{"src": "images/P_014.jpg", "height": 269},{"src": "images/P_015.jpg", "height": 282},{"src": "images/P_016.jpg", "height": 142},{"src": "images/P_017.jpg", "height": 279},{"src": "images/P_018.jpg", "height": 289},{"src": "images/P_019.jpg", "height": 262},{"src": "images/P_020.jpg", "height": 274}];var listNum = parseInt((myClient().width - 17) / 192);//    根据窗口宽度和图片宽度确定列表的数目 滚动条默认17宽，192是图片宽var ul;//    申明一个数组用来存每个ul的高度var heightArr = [];for(var i = 0; i <listNum; i++){ul = document.createElement('ul');box.appendChild(ul);heightArr[i] = 0;	//刚创建出来的每个ul高度都是0；}//    根据datas里的数据动态创建li的个数loadPic(datas);
//当第一次图片加载完时，如果继续向下滚，继续加载，
加载条件是滚动条卷出去宽度+可视宽度大于最小ul时
    window.onscroll = function(){	//获取每一次页面加载后最小那列图（ul）的高度；
var minVal = getMin(heightArr).value;
//如果我的可视宽度加上被卷出去的高度大于了最小的那列图
if(myClient().height + myScroll().scrollTop > minVal){//再加载图片loadPic(datas); //这是模拟，用ajax在服务器里获取，会有没图的时候。。}}
  function createPic(datas) {//根据datas对象的个数创建lifor (var i = 0; i < datas.length; i++) {var li = document.createElement("li");//    依次往每个li里面添加图片li.innerHTML = '<img src="' + datas[i].src + '" alt="">';//取出数组中最小高度的索引值var minIndex = getMin(heightArr).index;//然后每次我们往这个最矮的ul里加图片//    其实第一轮时，每个ul的高度都是0；lists[minIndex].appendChild(li);//添加图片后，更新heightArr中每个ul的高度以便下一次的比较////由于图片有加载时间，我们可以从服务器先接回图片信息//但是我们没有服务器，可以在datas中添加当前图片的信息，在这里进行获取//heightArr[minIndex] += datas[i].height;}}}
	//求一组数中的最小值，等会每组图的列表比较时，会用到它function getMin(arr) {var minValue = arr[0];var minIndex = 0;for (var i = 0; i < arr.length; i++) {if (minValue > arr[i]) {minValue = arr[i];	//最小值minIndex = i;		//最小值的索引}}return {index: minIndex,value: minValue};}
	//用来兼容每个浏览器支持的视口的宽度和高度function myClient() {return {width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0}}
//用来兼容每个浏览器支持的页面被卷曲的高度和宽度
    function myScroll() {  return {scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0  };    }</script>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                瀑布流
                                                常见网页特效
                                                scrollTop
                                                clientWidth
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航