瀑布流，又称瀑布流式布局，布局模式和瀑布很相像而得名。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
国内这样的网站有很多。像素材网，一些电商网站等都采用这类布局方式。为了揭开瀑布流模式的设计，我今天就为大家介绍两种常见的做法。
方案一：使用jQuery的Masonry插件进行制作。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Masonry瀑布流</title>
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>
<style>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
</style>
</head>
<body>
<div id="masonry" class="container-fluid">
<div class="box"><img src="1.jpg"></div>
<div class="box"><img src="2.jpg"></div>
<div class="box"><img src="3.jpg"></div>
<div class="box"><img src="4.jpg"></div>
<div class="box"><img src="5.jpg"></div>
</div>
<script>
$(function() {
var $objbox = $("#masonry");
var gutter = 25;
var centerFunc, $top0;
$objbox.imagesLoaded(function() {
$objbox.masonry({
itemSelector: "#masonry > .box",
gutter: gutter,
isAnimated: true
});
centerFunc = function() {
$top0 = $objbox.children("[style*='top: 0']");
$objbox.css("left", ($objbox.width() - ($top0.width() * $top0.length + gutter * ($top0.length - 1))) / 2).parent().css("overflow", "hidden");
};
centerFunc();
});
var tur = true;
$(window).resize(function() {
if (tur) {
setTimeout(function() {
tur = true;
centerFunc();
},
1000);
tur = false;
}
});
});
</script>
</body>
</html>
方案二：自己实现，不使用插件的方式。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义瀑布流</title>
<style>
body{
margin: 0px;
background: darkgray;
}
.container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_border{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
.box_border img{
width: 150px;
height: auto;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="box_border" id="box_border">
<div class="box" id="box1">
<img src="image/01.jpg">
</div>
<div class="box" id="box1">
<img src="image/01.jpg">
</div>
<div class="box" id="box1">
<img src="image/01.jpg">
</div>
......
</div>
</div>
<script>
window.onload = function() {
var cparent = document.getElementById("container");
setImgLocation(cparent);
//设置加载的图片
var data = ["image/01.jpg", "image/02.jpg", "image/03.jpg", "image/04.jpg", "image/05.jpg", "image/06.jpg", "image/07.jpg", "image/08.jpg", "image/09.jpg",
"image/11.jpg", "image/12.jpg", "image/13.jpg", "image/14.jpg", "image/15.jpg", "image/16.jpg", "image/17.jpg"];
window.onscroll = function () {
if (checkLoad(cparent)) {
for (var i = 0; i < data.length; i++) {
//创建新的节点
var div1 = document.createElement("div");
div1.className = "box";
var div2 = document.createElement("div");
div2.className = "box_border";
var img = document.createElement("img");
img.className = ".box_border img";
img.src = data[i];
div2.appendChild(img);
div1.appendChild(div2);
cparent.appendChild(div1);
}
setImgLocation(cparent);
}
}
}
function checkLoad(cparent){
var childArray = getChildNodes(cparent);
var lastImgHight = childArray[childArray.length-1].offsetTop;
var scrollHeight = document.documentElement.scrollTop||document.body.scrollTop;
var browserHeight = document.documentElement.clientHeight;
if(lastImgHight < scrollHeight+browserHeight){
return true;
}else {
return false;
}
}
function setImgLocation(cparent){
var childArray = getChildNodes(cparent),
imgWidth = childArray[0].offsetWidth,
browserWidth = document.documentElement.clientWidth,
count = Math.floor(browserWidth/imgWidth);
cparent.style.cssText = "width:"+count*imgWidth+"px;margin: 0 auto;";
var imgHArray = [];
for(var i=0;i<childArray.length;i++){
if(i<count){
imgHArray[i] = childArray[i].offsetHeight;
}else{
var minHeight = Math.min.apply(null,imgHArray),
minIndex = getMinIndex(minHeight,imgHArray);
childArray[i].style.position = "absolute";
childArray[i].style.top = minHeight+"px";
childArray[i].style.left = childArray[minIndex].offsetLeft+"px";
imgHArray[minIndex] += childArray[i].offsetHeight;
}
}
}
function getMinIndex(mHeight,imgHArray){
for(var i in imgHArray){
if(imgHArray[i] == mHeight)
return i;
}
}
function getChildNodes(parent){
var chArray =[];
var tempNodes = parent.getElementsByTagName("*");
for(var i = 0;i<tempNodes.length;i++){
if(tempNodes[i].className == "box"){
chArray.push(tempNodes[i]);
}
}
return chArray;
}
</script>
</body>
</html>
效果如图片所示！睡觉了，就分享到这里！
： » HTML5仿素材网的瀑布流设计
原创文章，作者：jamestackk，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251114.html