瀑布流布局实现代码详解

快乐打工仔 分类:实例代码

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

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

代码实例如下:

<!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()一章节。

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

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

回复

我来回复
  • 暂无回复内容