首页
登录 | 注册

瀑布流

 

什么是瀑布流?

演示效果点这里。瀑布流呢,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高

借鉴网上一张图

瀑布流

每一张图片所在位置依次为图片上的数字顺序。简单来说:哪一列高度最小就放在哪一列。

怎么实现瀑布流?

首先我们知道了瀑布流是多列的,并且每一列的宽度是相等的。原理就是哪一列高度最小就放在哪一列。

所以我们只要知道哪一列高度最短就可以实现瀑布流了。

首先第一个问题是我们怎么给图片定位。我们采用position定位来实现。我们只要通过js控制left和top的大小就可以将图片放在任意位置了。

<div class="container">
	<img src="" alt="">
</div>

<style>
	div.container{
            position: relative;
            margin: 0 auto;
	}
	img{
            position: absolute;
            left: 0px;
            right: 0px;
	}
</style>

那left和right如何知道是多少了?

要确定left和right是多少我们就需要先知道有多少列!

要知道有多少列我们就要先确定每一列的大小。根据浏览器的宽度来计算出能放多少列!

//第一步:定义每一列的宽度和每一列的间距
var itemWith = 220,//每一列宽度
itemSpace = 15;//每列之间的间距

//第二步:计算能容纳多少列
var cols=Math.floor($(window).innerWidth()/(itemWith + itemSpace));//当前的列数

//第三步:控制列数在 3 ~ 6之间(这一步视自己情况而定,可有可无)
if(cols>6){
	cols=6
} else if (cols < 3) {
	cols=3;
}

//第四步:设置父容器宽度 等于 所有列的宽度和
$(".container").css({'width':235*cols-15+'px'});

效果图

瀑布流

接下来我们就可以来控制图片的left和top了。

首先定义一个数组用来记录每一列left值,再定义一个数组来记录每一列的top值。

//初始化每一列的数据
var arrL=[];//每一列的left值
var arrT=[];//,每一列的top值
//初始化
for(var i=0;i<cols;i++){
	arrL.push(i*(itemWith + itemSpace));//在left里面放每一列的left大小
	arrT.push(0);//在top里面初始化高度为0;
}
/*
此时
    第一列的left和top就是  left为arrL[0],top为arrT[0]
    第二列的left和top就是  left为arrL[1],top为arrT[1]
    ...
*/

接下来我们只需要判断arrT数组中哪一列的值最小,将图片的left和top设置成相应的大小就行啦。

//求top最小值的列
function minTop(){
	var min=arrT[0];//最小值
	var idx=0;//最小值的索引
	for(var i=0;i<cols;i++){
		if(arrT[i]<min){
			min=arrT[i];
			idx=i;
		}
	}
	return idx;
}

//动态创建img,并且插入到container容器中去,再定位到具体位置.
//创建img标签
var img=document.createElement('img');
//添加路径,src为图片路径
img.src = src;
//添加到容器中
$('.container').append(img);
//获取当前插入的img标签.此处在具体项目中需要修改为能正确获取到刚刚插入的img
var currentImg=document.getElementsByTagName('img')[0];
//获取此时最短一列的索引
var idx=minTop();//最小值的索引
//定位
currentImg.style.left=arrL[idx]+'px';
currentImg.style.top=arrT[idx]+'px';
//定宽高,此处的height需要根据实际情况计算.
currentImg.style.width= itemWith + 'px';
currentImg.style.height= height + 'px';
//最后更新arrT数组当前列的数据,height为刚刚插入图片的高度,15为图片之间纵向间距.
arrT[idx] = arrT[idx] + height + 15;//当前的top值+自身的高度+间距10

到这里瀑布流的思路就已经很清晰啦!

演示源码点这里



2020 jeepxie.net webmaster#jeepxie.net
10 q. 0.009 s.
京ICP备10005923号