瀑布流布局

瀑布流布局

优势

首先，是图片的宽度固定，图片的长度不一样。其次，是当页面滚动时 ，会再次加载数据，动态的渲染在页面上。

<div id="itembox">
		<div class="item">
			<img src="images/P_000.jpg">
		</div>
		<div class="item">
			<img src="images/P_001.jpg">
		</div>
		<div class="item">
			<img src="images/P_002.jpg">
		</div>
		<div class="item">
			<img src="images/P_003.jpg">
		</div>
		<div class="item">
			<img src="images/P_004.jpg">
		</div>
		<div class="item">
			<img src="images/P_005.jpg">
		</div>
		<div class="item">
			<img src="images/P_006.jpg">
		</div>
		<div class="item">
			<img src="images/P_007.jpg">
		</div>
		<div class="item">
			<img src="images/P_008.jpg">
		</div>
		<div class="item">
			<img src="images/P_009.jpg">
		</div>
		<div class="item">
			<img src="images/P_010.jpg">
		</div>
		<div class="item">
			<img src="images/P_011.jpg">
		</div>
		<div class="item">
			<img src="images/P_012.jpg">
		</div>
		<div class="item">
			<img src="images/P_013.jpg">
		</div>
		<div class="item">
			<img src="images/P_014.jpg">
		</div>
		<div class="item">
			<img src="images/P_015.jpg">
		</div>
	</div>

*{
			padding: 0;
			margin:0; 
		}
		#itembox{
			width: 1050px;
			margin:0 auto;
			position: relative;
		}
		.item{
			border: 1px solid #ccc;
			padding: 4px;
			position: absolute;
		}

分析

1.获取itembox的宽度
2.获取item的宽度
3.求出列数 itembox宽度/item宽度
4.求出间距 （总宽度-元素个数*元素宽度)/（列数-1）
5.实现瀑布流布局
6.滚动页面时，加载数据

<script type="text/javascript">
		window.onload=function(){
			//获取元素
			var itembox=document.getElementById('itembox');
			var items=document.getElementsByClassName('item');
			//1.获取itembox的宽度
			var itemboxWidth=itembox.offsetWidth;
			//2.获取item的宽度
			var itemWidth=items[0].offsetWidth;

			//调试
			console.log(itemboxWidth+'  '+itemWidth);
			
			// 3.求出列数  itembox宽度/item宽度
			var column=parseInt(itemboxWidth/itemWidth);
			console.log(column);
			// 4.求出间距 （总宽度-元素个数*元素宽度)/（列数-1）
			var distance=(itemboxWidth-column*itemWidth)/(column-1);
			// 5.实现瀑布流布局
			//5.1定义一个数组，用来存放每列的高度
			var arr=[];
			waterFull();
			function waterFull(){
				//遍历item数组，给每一个元素指定位置，使其实现瀑布流布局
				for(var i=0;i<items.length;i++){
					if(i<column){
						//强调 属性值必须是字符串
						items[i].style.left=(itemWidth+distance)*i+'px';
						arr[i]=items[i].offsetHeight;
					}else{
						//找到最小高度的列以及它的索引  对象封装多个属性
						var minH=getMin(arr).minH;
						var minI=getMin(arr).minI;
						//最小高度列的left=（元素宽度+间距）*索引
						items[i].style.left=(itemWidth+distance)*minI+'px';
						//top=minH+间距
						items[i].style.top=minH+distance+'px';
						//更新列的高度 = 原来的高度+新元素的高度
						arr[minI]=minH+distance+items[i].offsetHeight;
					}
				}
			}

			//获取最小列的索引和高度
			function getMin(arr){
				var obj={};//{}表示对象
				obj.minH=arr[0];//对象.属性名=属性值   最小高度
				obj.minI=0;
				for(var i=1;i<arr.length;i++){//循环从第二个开始
					if(obj.minH>arr[i]){
						obj.minH=arr[i];
						obj.minI=i;
					}
				}
				return obj;
			}
			// 6.滚动页面时，加载数据 事件是页面滚动
			window.onscroll=function(){
				//判断：当前页面元素是否足够 滚动距离+页面的高度>minH
				if(window.pageYOffset+window.innerHeight>getMin(arr).minH){
					//新元素 其实是一张图片 src是不同的
					//数据源
					var json=[
						{"src":"images/P_000.jpg"},
						{"src":"images/P_001.jpg"},
						{"src":"images/P_002.jpg"},
						{"src":"images/P_003.jpg"},
						{"src":"images/P_004.jpg"},
						{"src":"images/P_005.jpg"},
						{"src":"images/P_006.jpg"},
						{"src":"images/P_007.jpg"},
						{"src":"images/P_008.jpg"},
						{"src":"images/P_009.jpg"},
						{"src":"images/P_010.jpg"}
					];
					for(var i=0;i<json.length;i++){
						var div=document.createElement('div');
						div.className='item';
						var img=document.createElement('img');
						img.src=json[i].src;
						div.appendChild(img);
						itembox.appendChild(div);
					}
					waterFull();
				}
			}
		}
	</script>