瀑布流网页模型的一个示例

最新推荐文章于 2024-09-21 12:03:43 发布

purple_lumpy

最新推荐文章于 2024-09-21 12:03:43 发布

阅读量667

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/purple_lumpy/article/details/79850955

版权

JQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

结构：

一个大盒子，居中；包含若干个小盒子。每一个小盒子有一个阴影层

HTML结构：

<!DOCTYPE html>
<html>
<head>
	<title>瀑布流</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrap">
	<div>
		<img src="images/1.png">
		<a href="http://www.imooc.com">第一怪 竹筒当烟袋</a>
	</div>
	<div>
		<img src="images/2.png">
		<a href="http://www.imooc.com">第二怪</a>
	</div>
	<div>
		<img src="images/3.png">
		<a href="#">第三怪</a>
	</div>
	<div>
		<img src="images/4.png">
		<a href="#">第四怪</a>
	</div>
	<div>
		<img src="images/5.png">
		<a href="#">第五怪</a>
	</div>
	<div>
		<img src="images/6.png">
		<a href="#">第六怪</a>
	</div>
	<div>
		<img src="images/7.png">
		<a href="#">第七怪</a>
	</div>
	<div>
		<img src="images/8.png">
		<a href="#">第八怪</a>
	</div>
	<div>
		<img src="images/9.png">
		<a href="#">第九怪</a>
	</div>
	<div>
		<img src="images/10.png">
		<a href="#">第十怪</a>
	</div>
	<div>
		<img src="images/11.png">
		<a href="#">第十一怪</a>
	</div>
	<div>
		<img src="images/12.png">
		<a href="#">第十二怪</a>
	</div>
	<div>
		<img src="images/13.png">
		<a href="#">第十三怪</a>
	</div>
	<div>
		<img src="images/14.png">
		<a href="#">第十四怪</a>
	</div>
	<div>
		<img src="images/15.png">
		<a href="#">第十五怪</a>
	</div>
	<div>
		<img src="images/16.png">
		<a href="#">第十六怪</a>
	</div>
	<div>
		<img src="images/17.png">
		<a href="#">第十七怪</a>
	</div>
	<div>
		<img src="images/18.png">
		<a href="#">第十八怪</a>
	</div>
</div>
	
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

基本的样式：

*{
	margin:0;
	padding:0;
	border:none;
}

body{
	background: #ddd;
}

img{
	border:none;
}

a{
	text-decoration: none;
	color: #444;
}

a:hover{
	color: #999;
}

#wrap{
	position: relative;
	/*当一个盒子定位为相对、绝对、固定时，它的默认宽度为0*/
	width: auto;
	height: auto;
	margin:0 auto;
}

#wrap div{
	float: left;
	box-sizing: border-box;
	/*width 为边框里的width*/
	width: 280px;
	height: auto;
	margin:10px;
	padding:10px;
	border-radius: 5px;
	background:#fff;
}

#wrap div img{
	width: 100%;
}

#wrap div a{
	display: block;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
}

瀑布流布局【javascript】

判断一行多少列，计算出容器的宽度（这样容易可以居中显示）

function waterfall(wrap,boxes){
	// 一个box的边框内距离 + 外边框距离
	var boxWidth = boxes[0].offsetWidth + 20
	// 整个页面的视觉宽度
	var windowWidth = document.documentElement.clientWidth;
	// 每行多少列
	var colsNumber = Math.floor(windowWidth / boxWidth);

	// 容器的宽度
	wrap.style.width = boxWidth * colsNumber + 'px';
};

window.onload = function(){
	var wrap = document.getElementById('wrap');
	var boxes = wrap.getElementsByTagName('div')

	waterfall(wrap,boxes);
};

每一列的高度，保存进一个数组，下一张图片放入高度最小的那一列中。

function waterfall(wrap,boxes){
	// 一个box的边框内距宽 + 外边框距离宽
	var boxWidth = boxes[0].offsetWidth + 20
	// 整个页面的视觉宽度
	var windowWidth = document.documentElement.clientWidth;
	// 每行多少列
	var colsNumber = Math.floor(windowWidth / boxWidth);

	// 容器的宽度
	wrap.style.width = boxWidth * colsNumber + 'px';

	// 定义一个数组并存储每一列的高度
	var everyHeight = new Array();
	for (var i = 0; i < boxes.length; i++){
		if(i < colsNumber){
			// 一个box的边框内距高 + 外边框距离高
			everyHeight[i] = boxes[i].offsetHeight + 20;
		}else{
			var minHeight = Math.min.apply(null,everyHeight);
			var minIndex = getIndex(minHeight,everyHeight);
			// 10 是外边距
			var leftValue = boxes[minIndex].offsetLeft - 10;

			boxes[i].style.position = 'absolute';
			boxes[i].style.top = minHeight + 'px';
			boxes[i].style.left = leftValue + 'px';

			everyHeight[minIndex] += boxes[i].offsetHeight + 20;
		};

	}
};

// 获取最小列的索引
function getIndex(minHeight,everyHeight){
	for(index in everyHeight){
		if (everyHeight[index] == minHeight){
			return index;
		}
	}
}
window.onload = function(){
	var wrap = document.getElementById('wrap');
	var boxes = wrap.getElementsByTagName('div')

	waterfall(wrap,boxes);
};

瀑布流布局【jquery】

var waterfall = function(wrap,boxes){
	// 每行多少列,这里的width 是内容的宽度不包含内外边距
	var boxWidth = boxes.eq(0).width() + 40;
	var windowWidth = $(window).width();
	var colsNumber = Math.floor(windowWidth / boxWidth);

	// 设置容器宽度
	wrap.width(boxWidth * colsNumber);

	// 定义一个数组并存储每一列的高度
	var everyHeight = new Array();
	for (var i = 0; i < boxes.length; i++) {
		if (i < colsNumber) {
			everyHeight[i] = boxes.eq(i).height() + 40;
		} else {
			var minHeight = Math.min.apply(null, everyHeight);
			var minIndex = getIndex(minHeight, everyHeight);
			boxes.eq(i).css({
				'position': 'absolute',
				'top': minHeight,
				'left': boxes.eq(minIndex).position().left,
				'opacity': '0'
			}).stop().animate({
				'opacity': '1'
			}, 1000);
			everyHeight[minIndex] += boxes.eq(i).height() + 40;
		};
	}
};

// 获取最小列的索引
function getIndex(minHeight,everyHeight){
	for(index in everyHeight){
		if (everyHeight[index] == minHeight){
			return index;
		}
	}
}

$(document).ready(function(event){
	var wrap = $('#wrap');
	var boxes = $('#wrap').children('div');

	waterfall(wrap,boxes);
});

瀑布流追加效果