关键词：
一、瀑布流是个啥？
瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
最早采用瀑布流布局的网站是Pinterest，逐渐在国内流行开来，比如我们熟知的百度图片的布局，在“很久”以前，百度图片还是需要一页一页的点击进行查看更多图片，而现在的瀑布流布局使用户查找图片更加方便。
二、瀑布流的优缺点
优点：
1.节省了页面的空间，不再需要导航和页码按钮。
2.增强了用户的体验，使用户的体验更多的是在于浏览图片上，而不是在寻找怎么找下一页和切换的操作上。
缺点：
1.使用的网页类型有限：
这种瀑布流布局只适用于某些特定类型产品中一部分特定类型的内容。
比如我们在某宝买东西时，我们就需要记住第几页的哪个商品是我们想买的，然后再回头购买，这时候就需要我们的页面按钮来帮忙记忆，瀑布流反而更加麻烦。
2.永远看不到的页脚：
如果我们使用瀑布流无限滚动加载模式，那就是说我们永远也无法看到我们的页脚，当用户一次次的浏览到页面底部，看到页脚，却因为自动加载的内容的突然出现，无论怎样都无法点击到页脚中的链接或登录时，那么用户的体验是极为糟糕的，他们可能会愤怒的关掉你的网页。
3.关于页面数量：
对于用户来说，使用瀑布流自动加载来替代传统的换页其实是很方便的，而对于开发者的网站来说，页面的减少可能就无法展示更多地相关信息，最明显的就是广告减少。
三、瀑布流写法及原理
瀑布流到底长什么样子呢，那我们现在就来默写一个简单的瀑布流布局。先把乱七八糟的基础样式和布局稍微的敲一下~这里我们为了节省空间，就不缩进啦~
CSS:
*{margin: 0;padding: 0;}
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}
HTML:
<div id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
以下是简单的JS代码：
var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//声明元素块
//先创建一个随机数的函数
function ranDom(min,max){
return Math.random()*(max-min+1)+min;
}
//再创建一个添加li的函数
function createLi(num){
for(var i=0;i<num;i++){
var newLi=document.createElement("li");//创建li
newLi.style.height=ranDom(100,400)+"px";//使用随机数函数创建高度不同的li
var arrul=[];
//将ul的高度进行储存和比较
for(var j=0;j<ul.length;j++){
arrul.push(ul[j].offsetHeight);//储存ul的高度
}
var minHeight=arrul[0];
var minIndex=0;
for(var k=0;k<arrul.length;k++){
if(minHeight>arrul[k]){
minHeight=arrul[k];//比较出高度最短的ul然后赋值给minHeight
minIndex=k;//把高度最短的ul所在下标赋值给minIndex
}
}
ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
}
}
createLi(15);//执行函数，添加15个li，
//创建一个滚动事件
window.onscroll=function(){
// html总高度-可视化窗口高度=body的滚动高度
//兼容写法
var scrollTop=document.body.scrollTop;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
if(document.documentElement.offsetHeight-clientHeight<=scrollTop){
createLi(15);
}
}
//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的li
这样我们就实现了永远也看不到页脚的自动加载瀑布流布局。
四、总结
瀑布流简单来讲就是页面容器内的多个高度不固定的容器之间参差不齐的添加内容，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，也就是例子中的高度最短的位置，不断循环。
瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里自动加载又避免了用户鼠标点击的翻页操作。
瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉。
js实现动态瀑布流及放大切换图片效果(js案例)
...了一下当时学js写的一些案例，再次体验了一把用原生JS实现动态瀑布流效果的乐趣，现在把它整理出来，需要的小伙伴可以参考一下。该案例主要是用HTML+CSS控制样式，通过JS实现全局瀑布流以及点击图片放大、上下切换效果。H... 查看详情
js实现瀑布流效果
Js实现瀑布流效果通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示效果图：思路：1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数2.将每个图片定位3.每次找到最小高度的列，将图片加到... 查看详情
利用js实现简单的瀑布流效果
...的瀑布流效果吧,我们要先准备好八九张图片,当然啦,我们实现的是瀑布流效果,所以最好是高度不相同的,这样才可以看出来效果,对吧,嘿嘿.二.代码的准备工作 我们打开开发工具,先建个html工程,在 查看详情
简单实现加载图片的瀑布流效果
代码很简单，没有注释<styletype="text/css">*{margin:0px;padding:0px;}#container{position:relative;}.box{padding:5px;float:left;}.box_img{padding:5px;border:1pxsolid#CCC;box-shadow:005px#CCC;border-radius:5 查看详情
前端用jquery实现瀑布流效果
jQuery实现瀑布流效果何为瀑布流： 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布... 查看详情
jquery实现无限滚动瀑布流实现原理
现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinitescroll+Masonry=无限滚动瀑布... 查看详情
wpf下制作的简单瀑布流效果(代码片段)
...就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Unifor... 查看详情
vue实现网络图片瀑布流+下拉刷新+上拉加载更多(代码片段)
一、思路分析和效果图 用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路：根据加载数据的顺序，依次追加标签展示效果；选择哪种方式实现瀑布... 查看详情
flex布局实现瀑布流排版(代码片段)
网上有很多有关js（jq）实现瀑布流和有关瀑布流的插件很多，例如：插件（Masonry，Wookmark等等）。按照正常的逻辑思维，瀑布流的排版（item列表）一般都是由左到右，上而下排序的结果，单纯的css实现这一点有些困难，下面分... 查看详情
74.js---移动端文章的瀑布流的实现。(代码片段)
移动端文章的瀑布流的实现。 1.首先在前端html页面已经通过PHP代码循环完全数据。 2.然后在js先全部隐藏，通过判断滑动到底部，每次加载一部分数据，直到数据全部显示完全。js代码： //瀑布流//获取文章的总长度va... 查看详情
jquery实现瀑布流
jQuery实现瀑布流js分析：首先监听window事件获取图片加载的位置，调用图片加载位置的函数，然后以鼠标滑动的距离来加载图片1.HTML布局：1<divid="container">2<divclass="box">3<divclass="content">4<imgsrc="../img/1.jpg">5</div>... 查看详情
玩转masonryjs库来实现瀑布流web效果
...活性。就按照PinterestAndroid/IOS和花瓣MobileWebApp的目标开始实现。第一天的成果是完成了基本的 查看详情
wordpress制作照片瀑布流的效果，如何实现？
...果，引入正确文件，php返回正确的图片集和路径，就可以实现的wordpress有瀑布流主题：PhotoBroad主题，可以直接改主题，少量或者不去改代码的 参考技术C直接找wordpress的瀑布流模版不成吗，很多网站发布这种模版，感觉效果一般... 查看详情
javascript的瀑布流效果的详解及实现(代码片段)
...流的举例百度图片：http://image.baidu.com四、瀑布流的JS实现：1、设计思路：要想完成一个页面的瀑布流效果需要完成以下三个效果：1）实现一行中图片的个数固定：一行图片的个数=窗口宽度/图片的固定... 查看详情
使用css实现瀑布流效果
CSS实现瀑布流特点：不需要计算，浏览器自动计算，只需设置列宽，性能高；列宽随着浏览器窗口大小进行改变，用户体验不好；图片排序按照垂直顺序排列，打乱图片显示顺序；源代码：html.html:使用列表ul、li引入图片<!DOCTY... 查看详情
74.手机端图片瀑布流的加载代码和效果
http://www.bin012.com/index.php?route=product/product&path=63&product_id=52 查看详情
在鸿蒙中实现类似瀑布流效果
简介 鸿蒙OS开发SDK中对于长列表的实现ListContainer的实现较为简单，没法想RecyclerView一样通过使用不同的LayoutManager来实现复杂布局因此没法快速实现瀑布流效果。 但鸿蒙OS也都支持控件的Measure（onEstimateSize），layout（onArra... 查看详情
[js]瀑布流加载
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="keywords"content=""><metaname="description"content=""><title></title><scripttype="text/java 查看详情