waterfall是一款常用的瀑布流插件,你可以自定义容器,列数,间隔和是否可收缩尺寸。
瀑布流html代码
<div id="div1">
<div class="box">
<a href='http://www.sucaihuo.com/js/350.html' target='_blank'>
<img src='images/01.jpg' alt='jQuery手机点击显示二级菜单' />
</a>
</div>
<div class="box">
<a href='http://www.sucaihuo.com/js/351.html' target='_blank'>
<img src='images/04.jpg' alt='jquery鼠标悬浮动画菜单' />
</a>
</div>
</div>
引入waterfall瀑布流插件
<script src="js/jquery.waterfall.js"></script>
waterfall设置参数,并追究瀑布流图片
$("#div1").waterfall({
itemClass: ".box",
minColCount: 2,
spacingHeight: 10,
resizeable: true,
ajaxCallback: function(success, end) {
var data = {"data": [
{"src": "03.jpg"}, {"src": "04.jpg"}, {"src": "02.jpg"}, {"src": "05.jpg"}, {"src": "01.jpg"}, {"src": "06.jpg"}
]};
var str = "";
var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="images/{{src}}" /></div></div>'
for (var i = 0; i < data.data.length; i++) {
str += templ.replace("{{src}}", data.data[i].src);
}
$(str).appendTo($("#div1"));
success();
end();
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791