瀑布流
是一种常见的网页布局方式，在许多网站中我们都能看到“瀑布流”的效果，其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布，故将这种布局方式称为瀑布流。
生活中瀑布流实例：
花瓣网
在css中我们学习过使用Multi-columns来实现瀑布流的效果，通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。
现在，我来介绍一下如何通过js方式来实现瀑布流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cont{
margin: 0 auto;
position: relative;
}
.box{
float: left;
padding: 6px;
}
.imgbox{
border: 1px black solid;
border-radius: 6px;
padding: 6px;
}
.imgbox img{
width: 200px;
display: block;
}
</style>
<script>
onload = function () {
new Waterfall();
};
function Waterfall() {
this.ocont = document.querySelector(".cont");
this.abox = document.querySelectorAll(".box");
this.heightArr = [];
this.init();
//w1准备数据
this.data = this.load();
this.addScroll();
}
Waterfall.prototype.load = function(){
return [{img:"images/1.jpg"},{img:"images/2.jpg"},{img:"images/3.jpg"},{img:"images/4.jpg"},{img:"images/5.jpg"},{img:"images/6.jpg"},{img:"images/7.jpg"},{img:"images/8.jpg"},{img:"images/9.jpg"},{img:"images/10.jpg"},]
};
Waterfall.prototype.addScroll = function(){
var that = this;
onscroll = function () {
if (that.isBottom()){
that.data.forEach(val=>{
var img = document.createElement("img");
img.src = val.img;
var imgbox = document.createElement("div");
imgbox.className = "imgbox";
var box = document.createElement("div");
box.className = "box";
imgbox.appendChild(img);
box.appendChild(imgbox);
that.ocont.appendChild(box);
});
that.abox = document.querySelectorAll(".box");
that.heightArr = [];
that.firstLine();
that.otherLine();
}
}
};
Waterfall.prototype.isBottom = function(){
var clientH = document.documentElement.clientHeight;
var scrollT = document.documentElement.scrollTop;
var scrollH = document.documentElement.scrollHeight;
if (clientH + scrollT >= scrollH-200){
return true;
}else{
return false;
}
};
Waterfall.prototype.init = function () {
this.num = Math.floor(document.documentElement.clientWidth/this.abox[0].offsetWidth);
this.ocont.style.width = this.num*this.abox[0].offsetWidth+"px";
//区分第一行
this.firstLine();
//区分最后一行
this.otherLine();
};
Waterfall.prototype.firstLine = function () {
for (var i=0;i<this.num;i++){
this.heightArr.push(this.abox[i].offsetHeight);
}
};
Waterfall.prototype.otherLine = function () {
for (var i=this.num;i<this.abox.length;i++){
var min = getMin(this.heightArr);
var minIndex = this.heightArr.indexOf(min);
//设置定位，left，top
this.abox[i].style.position = "absolute";
this.abox[i].style.top = min + "px";
this.abox[i].style.left = minIndex*this.abox[0].offsetWidth+"px";
this.heightArr[minIndex] += this.abox[i].offsetHeight;
}
};
function getMin(arr) {
var myarr = [];
arr.forEach(val =>{
myarr.push(val);
});
return myarr.sort((a,b)=>a-b)[0];
}
</script>
</head>
<body>
<div>
<div>
<div>
<img src="images/4.jpg" >
</div>
</div>
<div>
<div>
<img src="images/3.jpg" >
</div>
</div>
<div>
<div>
<img src="images/2.jpg" >
</div>
</div>
<div>
<div>
<img src="images/1.jpg" >
</div>
</div>
<div>
<div>
<img src="images/5.jpg" >
</div>
</div>
<div>
<div>
<img src="images/6.jpg" >
</div>
</div>
<div>
<div>
<img src="images/7.jpg" >
</div>
</div>
<div>
<div>
<img src="images/8.jpg" >
</div>
</div>
<div>
<div>
<img src="images/9.jpg" >
</div>
</div>
<div>
<div>
<img src="images/10.jpg" >
</div>
</div>
<div>
<div>
<img src="images/4.jpg" >
</div>
</div>
<div>
<div>
<img src="images/3.jpg" >
</div>
</div>
<div>
<div>
<img src="images/2.jpg" >
</div>
</div>
<div>
<div>
<img src="images/1.jpg" >
</div>
</div>
<div>
<div>
<img src="images/5.jpg" >
</div>
</div>
<div>
<div>
<img src="images/6.jpg" >
</div>
</div>
<div>
<div>
<img src="images/7.jpg" >
</div>
</div>
<div>
<div>
<img src="images/8.jpg" >
</div>
</div>
<div>
<div>
<img src="images/9.jpg" >
</div>
</div>
<div>
<div>
<img src="images/10.jpg" >
</div>
</div>
<div>
<div>
<img src="images/3.jpg" >
</div>
</div>
<div>
<div>
<img src="images/2.jpg" >
</div>
</div>
<div>
<div>
<img src="images/1.jpg" >
</div>
</div>
<div>
<div>
<img src="images/5.jpg" >
</div>
</div>
<div>
<div>
<img src="images/6.jpg" >
</div>
</div>
<div>
<div>
<img src="images/7.jpg" >
</div>
</div>
<div>
<div>
<img src="images/8.jpg" >
</div>
</div>
<div>
<div>
<img src="images/9.jpg" >
</div>
</div>
<div>
<div>
<img src="images/10.jpg" >
</div>
</div>
<div>
<div>
<img src="images/3.jpg" >
</div>
</div>
<div>
<div>
<img src="images/2.jpg" >
</div>
</div>
<div>
<div>
<img src="images/1.jpg" >
</div>
</div>
<div>
<div>
<img src="images/5.jpg" >
</div>
</div>
<div>
<div>
<img src="images/6.jpg" >
</div>
</div>
<div>
<div>
<img src="images/7.jpg" >
</div>
</div>
<div>
<div>
<img src="images/8.jpg" >
</div>
</div>
<div>
<div>
<img src="images/9.jpg" >
</div>
</div>
<div>
<div>
<img src="images/10.jpg" >
</div>
</div>
<div>
<div>
<img src="images/3.jpg" >
</div>
</div>
<div>
<div>
<img src="images/2.jpg" >
</div>
</div>
<div>
<div>
<img src="images/1.jpg" >
</div>
</div>
<div>
<div>
<img src="images/5.jpg" >
</div>
</div>
<div>
<div>
<img src="images/6.jpg" >
</div>
</div>
<div>
<div>
<img src="images/7.jpg" >
</div>
</div>
<div>
<div>
<img src="images/8.jpg" >
</div>
</div>
<div>
<div>
<img src="images/9.jpg" >
</div>
</div>
<div>
<div>
<img src="images/10.jpg" >
</div>
</div>
</div>
</body>
</html>
vue实现瀑布流布局的组件/插件总汇
瀑布流作为当前比较流行的一种网页布局方式，在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果，该布局随着页面滚动，数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件
CSS3实现瀑布流布局
瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。设置外部容器多列列数（column-count）和列间距（column-gap）
瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
万能瀑布流
常见的瀑布流实现大部分只适用于子块尺寸固定或内部有图片异步加载的情况。而对于子块有图片这种可能引起尺寸变化的情况，通常的做法是写死图片高度，或检测内部的 img 元素从而在 onload 事件中进行重排。
原生JS实现一个瀑布流插件
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。
纯CSS瀑布流与JS瀑布流
又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路：根据加载数据的顺序，依次追加标签展示效果；
小程序实现瀑布流和上拉加载
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高。基本思路就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列
JavaScript实现简单的图片瀑布流插件
JavaScript实现简单的图片瀑布流插件，功能：1).可以自动根据浏览器视口宽度，改变图片瀑布流的宽度2).添加了函数防抖功能
css实现瀑布流布局
依赖 column 便可实现最简单实用的瀑布流布局，我这里前端框架用的是 Vue, 用其他的也一样，column-count: 3; 内容均分三份
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!