以下是 底部自动填充对齐jquery瀑布流代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>底部自动填充对齐jquery瀑布流</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";color:#333;}
a{text-decoration:none;color:#333;-webkit-transition:color .2s;-moz-transition:color .2s;-o-transition:color .2s;-ms-transition:color .2s;transition:color .2s;}
a:hover{text-decoration:underline;color:#ff7d8e;}
a:focus{outline:none;}
/* brand-list */
.brand-list{width:1020px;margin:15px auto 0 auto;position:relative;}
.brand-list .item{position:absolute;width:202px;background-color:#E3F3FF;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;-ms-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-size:18px;font-weight:800;line-height:.8;margin-bottom:20px;}
.brand-list .item p{margin-bottom:15px;}
</style>
</head>
<body>
<div class="brand-list" id="brand-waterfall">
<!-- 循环字母模块 item -->
<div class="item" id="brand-a">
<h3>A</h3>
<p><img src="news_07.jpg" width="204" height="131" /></p>
<p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
<p><a href="#" target="_blank">abeeco</a></p>
<p><a href="#" target="_blank">AFU/阿芙</a></p>
<p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
<p><a href="#" target="_blank">adidas/阿迪达斯</a></p>
</div>
<div class="item" id="brand-b">
<h3>B</h3>
<p><img src="images/news_27.jpg" width="202" height="151" /></p>
</div>
<div class="item" id="brand-c">
<h3>C</h3>
<p><img src="images/news_35.jpg" width="202" height="141" /> <img src="images/news_37.jpg" width="202" height="202" /></p>
</div>
<div class="item" id="brand-d">
<h3>D</h3>
<p><a href="#" target="_blank">Dr.Jart+Dr.MJDior/迪奥</a></p>
<p><a href="#" target="_blank">dodo</a></p>
<p><a href="#" target="_blank">Dior/迪奥</a></p>
<p><a href="#" target="_blank">Dove/多芬</a></p>
<p><a href="#" target="_blank">DHC/蝶翠诗</a></p>
<p><a href="#" target="_blank">Davidoff/大卫杜夫</a></p>
</div>
<div class="item" id="brand-e">
<h3>E</h3>
<p><a href="#" target="_blank">N-Dorphin/恩朵娉</a></p>
<p><a href="#" target="_blank">OPERA/娥佩兰</a></p>
<p><a href="#" target="_blank">ELF</a></p>
<p><a href="#" target="_blank">eos</a></p>
</div>
<div class="item" id="brand-f">
<h3>F</h3>
<p><a href="#" target="_blank">芳草集</a></p>
<p><a href="#" target="_blank">THEFACESHOP/菲诗小铺</a></p>
<p><a href="#" target="_blank">Fanxishop/凡茜</a></p>
<p><a href="#" target="_blank">FANCL/芳珂（芳凯尔）</a></p>
<p><a href="#" target="_blank">VERSACE/范思哲</a></p>
</div>
<div class="item" id="brand-g">
<h3>G</h3>
<p><a href="#" target="_blank">ARDELL/艾黛尔</a></p>
<p><a href="#" target="_blank">ANNASUI/安娜苏</a></p>
<p><a href="#" target="_blank">ETUDEHOUSE/爱丽小屋</a></p>
<p><a href="#" target="_blank">abeeco</a></p>
<p><a href="#" target="_blank">AFU/阿芙</a></p>
<p><a href="#" target="_blank">Egyptian-Magic-Cream/埃及魔法膏</a></p>
<p><a href="#" target="_blank">adidas/阿迪达斯</a></p>
</div>
<div class="item" id="brand-h">
<h3>H</h3>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">Herbacin/贺本清</a></p>
<p><a href="#" target="_blank">花瑶花</a></p>
<p><a href="#" target="_blank">花漾美姬</a></p>
<p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
<p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
</div>
<div class="item" id="brand-l">
<h3>L</h3>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">Herbacin/贺本清</a></p>
<p><a href="#" target="_blank">花瑶花</a></p>
<p><a href="#" target="_blank">花漾美姬</a></p>
<p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
<p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
</div>
<div class="item" id="brand-m">
<h3>M</h3>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">Herbacin/贺本清</a></p>
<p><a href="#" target="_blank">花瑶花</a></p>
<p><a href="#" target="_blank">花漾美姬</a></p>
<p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
<p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
</div>
<div class="item" id="brand-n">
<h3>N</h3>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">LAMER/海蓝之谜</a></p>
<p><a href="#" target="_blank">BOCOTON/海诺丝丽</a></p>
<p><a href="#" target="_blank">CO.E/韩伊</a></p>
<p><a href="#" target="_blank">Herbacin/贺本清</a></p>
<p><a href="#" target="_blank">花瑶花</a></p>
<p><a href="#" target="_blank">花漾美姬</a></p>
<p><a href="#" target="_blank">HEY NATURE/韩彩妮</a></p>
<p><a href="#" target="_blank">Hipitch/黑龙堂</a></p>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('#brand-waterfall').waterfall();
});
// 瀑布流插件
// pannysp 2013.4.9
;(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 i = 0;
for (; i < _num; i++) {
pos.push([i*_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]){
//暂存top值最小那列的index
_temp = j;
}
}
this.style.cssText = 'left:'+pos[_temp][0]+'px; top:'+pos[_temp][1]+'px;';
//插入后，更新下该列的top值
pos[_temp][1] = pos[_temp][1] + _height;
});
// 计算top值最大的赋给外围div
(function() {
var i = 0, tops = [];
for (; i < _num; i++) {
tops.push(pos[i][1]);
}
tops.sort(function(a,b) {
return a-b;
});
$box.height(tops[_num-1]);
//增加尾部填充div
if(options.addfooter){
addfooter(tops[_num-1]);
}
})();
function addfooter(max) {
var addfooter = document.createElement('div');
addfooter.className = 'item additem';
for (var i = 0; i < _num; i++) {
if(max != pos[i][1]){
var clone = addfooter.cloneNode(),
_height = max - pos[i][1] - options.margin;
clone.style.cssText = 'left:'+pos[i][0]+'px; top:'+pos[i][1]+'px; height:'+_height+'px;';
$box[0].appendChild(clone);
}
}
}
});
}
})(jQuery);
</script>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
