瀑布流布局实现代码详解

快乐打工仔发布于 2年前分类：实例代码

分享一段代码实例，它实现了瀑布流布局效果。

因为当前瀑布流布局还是非常流行的，所以对它的良好掌握还是非常有必要的。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
background-color: #fff;
color: #333;
overflow-x: hidden;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,
button, input, textarea, th, td {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.cle:after, .clearfix:after, .clear_f:after, .cle_float:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.cle, .clearfix, .clear_f, .cle_float {
zoom: 1;
}
.fl {
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none;
color: #333;
}
#wrapper {
width: 1005px;
margin: 15px auto;
}
/*品牌列表*/
.brand-list {
width: 1020px;
overflow: hidden;
}
.brand-list .brand-bd {
position: relative;
margin-top: 5px;
}
.brand-list .item {
position: absolute;
width: 202px;
background-color: #f8f8f8;
border: 1px solid #f8f8f8;
padding: 18px;
top: 0;
left: 40%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.brand-list .hover {
box-shadow: 0px 1px 8px rgba(200,200,200,.6);
background-color: #fff;
border-color: #c8c8c8;
}
.brand-list .additem {
padding: 0;
width: 240px;
border: none;
}
.brand-list .item h3 {
font-size: 42px;
color: #666;
font-family: arial;
font-weight: bold;
line-height: .8;
margin-bottom: 20px;
}
.brand-list .item p {
margin-bottom: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
$('#brand-waterfall').waterfall();
});
(function($) {
$.fn.waterfall = function(options) {
var df = {
item: '.item',
margin: 15,
addfooter: true
};
options = $.extend(df, options);
return this.each(function() {
var $box = $(this),
pos = [],
_box_width = $box.width(),
$items = $box.find(options.item),
_owidth = $items.eq(0).outerWidth() + options.margin,
_oheight = $items.eq(0).outerHeight() + options.margin,
_num = Math.floor(_box_width / _owidth);
(function() {
var index = 0;
for (; index < _num; index++) {
pos.push([index * _owidth, 0]);
}
})();
$items.each(function() {
var _this = $(this),
_temp = 0,
_height = _this.outerHeight() + options.margin;
_this.hover(function() {
_this.addClass('hover');
}, function() {
_this.removeClass('hover');
});
for (var j = 0; j < _num; j++) {
if (pos[j][1] < pos[_temp][1]) {
_temp = j;
}
}
this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;';
pos[_temp][1] = pos[_temp][1] + _height;
});
// 计算top值最大的赋给外围div
(function() {
var index = 0,
tops = [];
for (; index < _num; index++) {
tops.push(pos[index][1]);
}
tops.sort(function(a, b) {
return a - b;
});
$box.height(tops[_num - 1]);
if (options.addfooter) {
addfooter(tops[_num - 1]);
}
})();
function addfooter(max) {
var addfooter = document.createElement('div');
addfooter.className = 'item additem';
for (var index = 0; index < _num; index++) {
if (max != pos[index][1]) {
var clone = addfooter.cloneNode(),
_height = max - pos[index][1] - options.margin;
clone.style.cssText='left:' + pos[index][0] + 'px; top:'+pos[index][1]+'px; height:'+_height+'px;';
$box[0].appendChild(clone);
}
}
}
});
}
})(jQuery);
</script>
</head>
<body>
<div id="wrapper">
<!-- 品牌列表开始 -->
<div class="brand-list">
<div class="brand-bd cle" id="brand-waterfall">
<!-- 循环字母模块 item -->
<div class="item" id="brand-a">
<h3>A</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-b">
<h3>B</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-c">
<h3>C</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
</div>
<div class="item" id="brand-d">
<h3>D</h3>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-e">
<h3>E</h3>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-f">
<h3>F</h3>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-g">
<h3>G</h3>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
</div>
<div class="item" id="brand-h">
<h3>H</h3>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
</div>
<div class="item" id="brand-l">
<h3>L</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
</div>
<div class="item" id="brand-m">
<h3>M</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
</div>
<div class="item" id="brand-n">
<h3>N</h3>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
<p><a href="#" target="_blank">没有任何人一开始就是高手</a></p>
<p><a href="#" target="_blank">本站的url地址是www.pipipi.net</a></p>
<p><a href="#" target="_blank">javascript教程</a></p>
<p><a href="#" target="_blank">css教程</a></p>
<p><a href="#" target="_blank">前端教程网一</a></p>
<p><a href="#" target="_blank">div教程</a></p>
<p><a href="#" target="_blank">只有努力才会有美好的未来</a></p>
</div>
</div>
</div>
</div>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

（1）.$(function() {})，当文档结构完全加载再去执行函数中的代码。

（2）.$('#brand-waterfall').waterfall()，实现了瀑布流效果。

（3）.(function($) {})(jQuery)一个匿名自执行函数，传递的是一个jQuery对象。

（4）.$.fn.waterfall = function(options) {}，为jquery实例对象添加一个方法，此方法实现了瀑布流效果，参数是一个配置对象。

（5）.var df = {

item: '.item',

margin: 15,

addfooter: true

}，默认的一些配置参数。

item属性值是一个样式类；margin规定的是外边距值；addfooter如果是true则表示瀑布流底部通过添加空元素是底部对齐。

（6）.options = $.extend(df, options)，进行对象合并操作，也就是重新配置参数。

（7）.return this.each(function() {})，进行遍历操作，之所以前面有return是为了实现链式调用。

（8）.var $box = $(this)，获取容器元素对象。

（9）.pos = []，创建一个空数组，用来存储元素的left和top属性值。

（10）._box_width = $box.width()，获取容器元素的宽度。

（11）.$items = $box.find(options.item)，获取所有class属性值为"item"的元素集合。

（12）._owidth = $items.eq(0).outerWidth() + options.margin，获取第一个元素所占据的宽度。

（13）._oheight = $items.eq(0).outerHeight() + options.margin，获取第一个元素所占据的高度。

（14）._num = Math.floor(_box_width / _owidth)，计算出每一行的列数。

（15）.(function() {

var index = 0;

for (; index < _num; index++) {

pos.push([index * _owidth, 0]);

}

})()，一个匿名自执行函数，通过for循环将数组压入另一个数组，子数组存储的left和top值，第一行的top值是0。

（16）.$items.each(function() {})，遍历集合中的每一个元素。

（17）.var _this = $(this)，将当前dom对象转换为jquery对象。

（18）._temp = 0,声明一个变量并赋值为0。

（19）._height = _this.outerHeight() + options.margin，获取当前列下一个元素的top值。

（20）._this.hover(function() {

_this.addClass('hover');

}, function() {

_this.removeClass('hover');

})，当鼠标悬浮或者离开时添加或者的删除指定的样式。

（21）.for (var j = 0; j < _num; j++) {

if (pos[j][1] < pos[_temp][1]) {

_temp = j;

}

}，通过for循环获取top值最小的那列,temp值就是存储的列的索引。

（22）.this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;'，将当前元素添加到top最低的列。

（23）.pos[_temp][1] = pos[_temp][1] + _height，更新当前列的下一个元素的top值。

（24）. (function() {})()，一个匿名自执行函数。

（25）.var index = 0，声明一个变量并赋值为0，后面会用到。

（26）.tops = []，声明一个空数组。

（27）.for (; index < _num; index++) {

tops.push(pos[index][1]);

}，将每一个列的最终top值（也就是每一列下一个元素的top值）存入数组。

（28）.tops.sort(function(a, b) {

return a - b;

})，对数组进行有小到大排序。

（29）.$box.height(tops[_num - 1])，获取最高一列的高度。

（30）.if (options.addfooter) {

addfooter(tops[_num - 1]);

}，如果options.addfooter为true，那么就在底部添加空白元素实现等高。

（31）.function addfooter(max) {}，参数是最高一列的高度值。

（32）.var addfooter = document.createElement('div')，动态创建一个div元素对象。

（33）.addfooter.className = 'item additem'，设置元素的class属性值。

（34）.for (var index = 0; index < _num; index++) {

if (max != pos[index][1]) {

var clone = addfooter.cloneNode(),

_height = max - pos[index][1] - options.margin;

clone.style.cssText = 'left:' + pos[index][0] + 'px; top:' + pos[index][1] + 'px; height:' + _height + 'px;';

$box[0].appendChild(clone);

}

}，通过for循环，将底部参差的部分补全。

二.相关阅读:

（1）.$.fn可以参阅$.fn作用简单介绍一章节。

（2）.$.extend()可以参阅jQuery.extend()一章节。

（3）.each()可以参阅jQuery each()一章节。

（4）.find()可以参阅jQuery find()一章节。

（5）.eq()可以参阅jQuery eq()一章节。

（6）.outerWidth()可以参阅jQuery outerWidth()一章节。

（7）.Math.floor()可以参阅javascript Math.floor()一章节。

（8）.push()可以参阅javascript push()一章节。

（9）.cssText可以参阅cssText一章节。

（10）.cloneNode()可以参阅javascript cloneNode()一章节。

（11）.appendChild()可以参阅appendChild()一章节。

瀑布流布局实现代码详解，这样的场景在实际项目中还是用的比较多的，关于瀑布流布局实现代码详解就介绍到这了。

瀑布流布局实现代码详解属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容