瀑布流图片

ygangying

于 2019-10-17 15:03:02 发布

阅读量130

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/ygangying/article/details/102606977

版权

6-Day3

分析 :

获取itemBox的宽度
获取item的宽度
求出列数 itemBox的宽度 / item的宽度
求出间距 (总宽度 - 元素个数* 元素宽度) / (列数 - 1)
实现瀑布流布局
滚动页面时加载数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#itemBox {
			width: 1050px;
			margin: 0 auto;
			position: relative;
		}
		.item {
			border: 1px solid #ccc;
			padding: 4px;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="itemBox">
		<div class="item">
			<img src="images/P_000.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>	
	<script>
			window.onload = function() {

				var itemBox = document.getElementById('itemBox');
				var items = document.getElementsByClassName('item');
				var itemBoxWidth = itemBox.offsetWidth;
				var itemWidth = items[0].offsetWidth;
				console.log(itemBoxWidth+ ' '+itemWidth);
				var column = parseInt(itemBoxWidth / itemWidth);
				console.log(column);
				var distance = (itemBoxWidth - column*itemWidth)/(column - 1);
				var arr =[];

				waterFull();
				function waterFull() {
					//遍历item数组  给每一个元素指定位置  使其实现瀑布流布局
					for (var i = 0; i < items.length; i++) {
						if (i < column) {
							//强调  强调  强调  属性值必须是字符串
							// 第一行的left = (元素宽度 + 间距) * （列数 - 1)
							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;

				}
				window.onscroll = function() {
					if (window.pageYOffset + window.innerHeight > getMin(arr).minH) {
						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>
</body>
</html>

ygangying

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流图片

6-Day3分析 :获取itemBox的宽度获取item的宽度求出列数 itemBox的宽度 / item的宽度求出间距 (总宽度 - 元素个数* 元素宽度) / (列数 - 1)实现瀑布流布局滚动页面时加载数据<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫