亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css和js實(shí)現(xiàn)瀑布流效果示例

  發(fā)布時(shí)間：2014-05-05 16:19:50   作者：佚名   我要評(píng)論
這篇文章主要介紹了css和js實(shí)現(xiàn)瀑布流效果示例,需要的朋友可以參考下

瀑布流效果

html代碼

復(fù)制代碼
代碼如下:

<div class="wrap">
<div class="bigbox" id="bigbox">
<!--每一小塊開(kāi)始-->
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描述</h2>
<p>此為介紹和描述</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描2述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述2</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描3述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述3</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描4述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述4</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描5述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述5</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描述</h2>
<p>此為介紹和描述</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描2述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述2</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描3述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述3</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描4述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述4</p>
</div>
</div>
<div class="listbox">
<div class="listbox-con">
<h2>圖片介紹和描5述</h2>
<p>此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述此為介紹和描述5</p>
</div>
</div>

</div>
</div>

css樣式代碼

復(fù)制代碼
代碼如下:

*{ margin:0px; padding:0px;}
.wrap{ padding:15px;}
.bigbox{ width:100%; position:relative;}
.listbox{ width:23%; padding:1%; position:absolute; box-shadow:0 0 1px #CCC;}
.listbox-con{ background:#fefefe;}
.listbox-con h2{ font-size:16px; color:#333;}
.listbox-con p{ font-size:14px; color:#666;}

插件代碼

復(fù)制代碼
代碼如下:

(function($){
var defaults ={
wflist:'.listbox'
};
$.fn.waterfal = function(opt){
opt =$.extend({},defaults,opt);
// 變量
var obj = $(this);//當(dāng)前對(duì)象

var wfwidth = $(opt.wflist).outerWidth(true),
minHeight = 0,
maxcol=Math.floor($(window).width()/wfwidth);

(function(wflist,maxcol,wfwidth,minHeight){
var wfarr = new Array(),minHeight = 0,minCol=0;

for(i=0;i<wflist.length;i++){
colHeight=wflist.eq(i).outerHeight(true);
if(i<maxcol){
wfarr[i] = colHeight;
wflist.eq(i).css({'top':0,left:i*wfwidth});
}else{
minHeight=Math.min.apply(null,wfarr);//
minCol = getArrayKey(wfarr, minHeight);
wfarr[minCol] += colHeight; //加上新高度后更新高度值
wflist.eq(i).css({"top":minHeight,left:minCol * wfwidth}); //先得到高度最小的Li，然后把接下來(lái)的li放到它的下面
}
wflist.eq(i).attr('id',"post_"+i);
};
})( $(opt.wflist),maxcol,wfwidth,minHeight);

function getArrayKey(wfa,minh){//使用for in運(yùn)算返回?cái)?shù)組中某一值的對(duì)應(yīng)項(xiàng)數(shù)(比如算出最小的高度值是數(shù)組里面的第幾個(gè))
for( ind in wfa ) {
if( wfa[ind] == minh) {
return ind;
}
}
};
var wfAreaH = parseInt( $(opt.wflist).last().css("top")) + $(opt.wflist).last().outerHeight(true)+ "px"; //顯示區(qū)域的高度為 最后一個(gè)元素的Top值+自身高度
obj.css({ "width":wfwidth * maxcol,"height":wfAreaH }); //設(shè)置顯示區(qū)域?qū)挾群透叨?
}
})(jQuery);

相關(guān)文章

最新評(píng)論