css和js实现瀑布流效果示例
发布时间:2014-05-05 16:19:50 作者:佚名 我要评论
这篇文章主要介绍了css和js实现瀑布流效果示例,需要的朋友可以参考下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
瀑布流效果
html代码
复制代码
代码如下:<div class="wrap">
<div class="bigbox" id="bigbox">
<!--每一小块开始-->
<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样式代码
复制代码
代码如下:*{ 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;}
插件代码
复制代码
代码如下:(function($){
var defaults ={
wflist:'.listbox'
};
$.fn.waterfal = function(opt){
opt =$.extend({},defaults,opt);
// 变量
var obj = $(this);//当前对象
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,然后把接下来的li放到它的下面
}
wflist.eq(i).attr('id',"post_"+i);
};
})( $(opt.wflist),maxcol,wfwidth,minHeight);
function getArrayKey(wfa,minh){//使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个)
for( ind in wfa ) {
if( wfa[ind] == minh) {
return ind;
}
}
};
var wfAreaH = parseInt( $(opt.wflist).last().css("top")) + $(opt.wflist).last().outerHeight(true)+ "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
obj.css({ "width":wfwidth * maxcol,"height":wfAreaH }); //设置显示区域宽度和高度
}
})(jQuery);
相关文章
- 这篇文章主要介绍了css3 column实现卡片瀑布流布局的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-22
- 这篇文章主要介绍了用CSS3实现瀑布流布局的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-10
- 本篇文章主要介绍了CSS3实现瀑布流布局与无限加载图片相册的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。2016-12-22
- 这篇文章主要为大家详细介绍了CSS3使用多列制作瀑布流的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-10
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。我们只2014-06-11- css实现瀑布流空白处背景粉色背景块,需要的朋友可以参考一下2013-02-22
详解纯css实现瀑布流(multi-column多列及flex布局)
这篇文章主要介绍了详解纯css实现瀑布流(multi-column多列及flex布局)的相关资料,用multi-column多列布局及flex布局实现瀑布流,感兴趣的小伙伴们可以参考一下2018-09-04
最新评论