本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧

分别使用javascript，jquery，css实现瀑布流布局：

第一种方式：使用JavaScript：

*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}

第二种方式：使用jquery：(html结构跟css同上)

$( window ).on( “load”, function(){
waterfall(‘main’,’box’);
//模拟数据json
var dataJson = {‘data’: [{‘src’:’30.jpg’},{‘src’:’31.jpg’},{‘src’:’32.jpg’},{‘src’:’33.jpg’},{‘src’:’34.jpg’},{‘src’:’35.jpg’},{‘src’:’36.jpg’},{‘src’:’37.jpg’},{‘src’:’38.jpg’},{‘src’:’39.jpg’},{‘src’:’40.jpg’},{‘src’:’41.jpg’},{‘src’:’42.jpg’},{‘src’:’43.jpg’},{‘src’:’44.jpg’},{‘src’:’45.jpg’}]};
window.onscroll=function(){
var isPosting = false;
if(checkscrollside(‘main’,’box’)
$.each(dataJson.data,function(index,dom){
var $box = $(”);
$box.html(‘‘);
$(‘#main’).append($box);
waterfall(‘main’,’box’);
isPosting = false;
});
}
}
});
/*
parend 父级id
clsName 元素class
*/
function waterfall(parent,clsName){
var $parent = $(‘#’+parent);//父元素
var $boxs = $parent.find(‘.’+clsName);//所有box元素
var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽
var cols = Math.floor( $( window ).width() / iPinW );//列数
$parent.width(iPinW * cols).css({‘margin’: ‘0 auto’});
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
$boxs.each( function( index, dom){
if( index < cols ){
pinHArr[ index ] = $(dom).height(); //所有列的高度
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$(dom).css({
‘position’: ‘absolute’,
‘top’: minH + 15,
‘left’: $boxs.eq( minHIndex ).position().left
});
//添加元素后修改pinHArr
pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
}
});
}
//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
function checkscrollside(parent,clsName){
//最后一个块框
var $lastBox = $(‘#’+parent).find(‘.’+clsName).last(),
lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
scrollTop = $(window).scrollTop(),
documentH = $(document).height();
return lastBoxH < scrollTop + documentH ? true : false;
}

第三种方式：使用css：(html结构同上)

.clearfix:after,
.clearfix:before {
content: ” “;
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
[color=#ff0000]-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;[/color]
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}

瀑布流实现方式比较：

Javascript原生方式/jquery方式

1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；

2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范

Css方式

1、不需要计算，浏览器自动计算，只需设置列宽，性能高；

2、列宽随着浏览器窗口大小进行改变，用户体验不好；

3、图片排序按照垂直顺序排列，打乱图片显示顺序；

4、图片加载还是依靠javascript/jquery实现

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

• Vue瀑布流插件的使用示例
• vue.js组件vue-waterfall-easy实现瀑布流效果
• web页面和微信小程序页面实现瀑布流效果
• Ionic3实现图片瀑布流布局
• 通过vue写一个瀑布流插件代码实例

依据《信息网络传播权保护条例》第二十二条之规定，即“避风港原则”，本站所有文章及内容系第三方作者上传，如有侵权行为请及时联系本站删除，本站不对内容传播行为承担赔偿责任。