三种方式实现瀑布流布局
程序员文章站
2022-05-26 23:13:15
分别使用javascript，jquery，css实现瀑布流布局：
第一种方式：使用javascript：
<...
分别使用javascript，jquery，css实现瀑布流布局：
第一种方式：使用javascript：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>瀑布流布局</title>
<style>
*{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%;
}
</style>
</head>
<body>
<div class="main clearfix" id="main">
<div class="box">
<div class="pic"><img src="./images/0.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/1.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/2.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/3.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/4.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/5.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/6.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/7.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/8.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/9.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/10.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/11.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/12.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/13.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/14.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/15.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/16.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/17.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/18.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/19.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/20.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/21.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/22.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/23.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/24.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/25.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/26.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/27.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/28.jpg"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/29.jpg"></div>
</div>
</div>
<script>
window.onload = 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'}]};
//监听scroll事件
window.onscroll = function(){
var isposting = false;
if(checkscollslide('main','box') && !isposting){
var oparent = document.getelementbyid('main');
for(var i in datajson.data){
isposting = true;
var obox = document.createelement('div');
obox.classname = 'box';
obox.innerhtml = '<div class="pic"><img src="./images/'+datajson.data[i].src+'"></div>';
oparent.appendchild(obox);
}
isposting = false;
waterfall('main','box');
}
}
}
/*
* parent 父元素id clsname 块元素类*/
function waterfall(parent,clsname){
//获取父元素
var oparent = document.getelementbyid(parent),
//获取所有box
aboxarr = oparent.getelementsbyclassname(clsname),
//单个box宽度
iboxw = aboxarr[0].offsetwidth,
// 列数
cols = math.floor(document.documentelement.clientwidth / iboxw);
oparent.style.csstext = 'width:'+iboxw*cols+'px;margin:0 auto;';
//储存所有的高度
var harr = [];
for(var i = 0; i < aboxarr.length; i++){
if(i < cols){
harr[i] = aboxarr[i].offsetheight;
}else{
//获取harr最小值
var minh = math.min.apply(null,harr),
// harr最小值索引index
minhindex = getminhindex(harr,minh);
aboxarr[i].style.csstext = 'position:absolute;top:'+minh+'px;left:'+aboxarr[minhindex].offsetleft+'px;';
//添加元素之后更新harr
harr[minhindex] += aboxarr[i].offsetheight;
}
}
}
//获取最小值索引
function getminhindex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//检查是否满足加载数据条件,parent 父元素id clsname 块元素类
function checkscollslide(parent,clsname){
var oparent = document.getelementbyid(parent),
aboxarr = oparent.getelementsbyclassname(clsname),
// 最后一个box元素的offsettop+高度的一半
lastboxh = aboxarr[aboxarr.length - 1].offsettop + aboxarr[aboxarr.length - 1].offsetheight / 2,
//兼容js标准模式和混杂模式
scrolltop = document.documentelement.scrolltop || document.body.scrolltop,
height = document.documentelement.clientheight || document.body.clientheight;
return lastboxh < scrolltop + height ? true : false;
}
</script>
</body>
</html>
第二种方式：使用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') && !isposting){
isposting = true;
$.each(datajson.data,function(index,dom){
var $box = $('<div class="box"></div>');
$box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
$('#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实现
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！