使用jq实现瀑布流闭包-2

继续上一次的瀑布流，这次贴代码，代码很简单的，各位一看就能懂

css：

li{ list-style-type:none;}

.box{position:relative; width:auto; height:auto;} 
.listBox li{width:210px; height:auto;}
.top_page{ width:180px; height:auto; padding:5px 0 5px 15px;}
.top_page img{width:180px;}
.botton_page{ width:180px; height:auto; text-align:center; margin:5px 0 0 15px; padding-top:5px; border-top:#999 1px solid;}
.botton_page span{width:180px; color:#999; font-size:12px;}
.top{background:url("./images/top_01.png") no-repeat; width:210px; height:18px;}
.cen{background:url("./images/center_01.png"); width:210px; text-align:center; height:auto;}
.bottom{background:url("./images/bottom_01.png") no-repeat; width:210px; height:18px;}

html：

山外青山楼外楼山外青
山外青山楼外楼山外青山楼外楼山外楼山外青山楼外楼

window.onload = function(){$("#listBox").Waterfall();window.onresize = function(){$("#listBox").Waterfall();}
}

(function($){$.fn.Waterfall = function(options){var box = $(this);var parent = box.parent();var list = box.find("li");var maxSizeOnRow = 0;if(list){//获取一行能摆放li的数量maxSizeOnRow = Math.floor((parseInt(document.documentElement.clientWidth)) / parseInt($(list[0]).width())) - 1; $(parent).width(maxSizeOnRow*($(list[0]).width()+20));}else{ //获取不到列表返回return false;}//初始化var socal ={init:function(){var num = 0, pre = 0;var $item = null;var width = $(list[0]).width();$(parent).css({left:(parseInt(document.documentElement.clientWidth) - maxSizeOnRow*($(list[0]).width()+20))/2});$(list).each(function(i){$item = $(this);if(!list[i-1]){ //如果是第一个$item.css({position:"absolute",top:10,left:20});}else{num = i - maxSizeOnRow;pre = (i%maxSizeOnRow)*(width + 20);if(i % maxSizeOnRow == 0) pre = 0;if(!list[num]){$item.css({position:"absolute",top:10,left:20 + pre,});}else{$item.css({position:"absolute",top:10 + parseFloat($(list[num]).height()) + parseFloat($(list[num]).css("top")) ,left:20 + pre,});}}});}};socal.init()}
}(jQuery));

实现的页面效果：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！