瀑布流目前已经不在是很时尚的词了，不过知道他实现的原理和具体实现过程还是值得我们好好学习的。
瀑布流效果目前在大多数网站中可以见到，参差不齐的多栏布局格式，是瀑布流的特点。瀑布流可以通过jQuery插件结合css代码来实现。
对于图片的展现，瀑布流的效果是高效而且独具吸引力的。瀑布流里延迟加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。
几种实现方式
随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:
1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式，如下图所示:
优点:
缺点:
那么下面我们就做一下这种布局的实现代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pinterest</title>
<style>
*{margin:0; padding: 0;}
ul,li{ list-style: none}
.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1; /* IE < 8 */clear:both;}
.waterfall{width: 660px; height: auto; margin:20px auto;}
.waterfall ul{ width:210px; margin:5px; float: left; }
</style>
<script type="text/javascript" src="ajax.js"></script>
<script>
/*
1,布局:浮动
2，数据添加
a，浮动布局的话，页面中（一竖排一个ul）有几个ul，css就很容易写直接浮动就好了，难点呢就是数据添加，数据要分别添加到4个ul中，要同时的。。
*/
/*
浮动布局
*/
window.onload=function(){
var aUl = document.getElementsByTagName("ul");
var bBtn=true;
//滚动条事件，获取可视区的距离，和滚动条的距离。
window.onscroll = function(){
var veiwHeight = document.documentElement.clientHeight;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0; i<aUl.length;i++){
var aLi=aUl[i].getElementsByTagName("li");
var lastLi = aLi[aLi.length-1];
if(posTop(lastLi) < veiwHeight + scrollY && bBtn){
bBtn=false;
ajax("data.js",function(str){
var json=eval("(" + str + ")");
if(json.code){
bBtn=true;
}
for(var i=0;i<json.list.length;i++){
var list=json.list[i];
for(var j=0;j<list.src.length;j++){
var oLi =document.createElement("li");
oLi.innerHTML="<img src="+list.src[j]+" /><p>"+list.title[j]+"</p>";
aUl[i].appendChild(oLi);
}
}
});
}
}
};
//获取到屏幕的距离
function posTop(obj){
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
};
</script>
</head>
<body>
<div class="waterfall">
<ul>
<li>
<img src="images/1.jpg" />
<p>1111111111</p>
</li>
<li>
<img src="images/2.jpg" />
<p>222222222222222</p>
</li>
<li>
<img src="images/3.jpg" />
<p>333333333333</p>
</li>
<li>
<img src="images/3.jpg" />
<p>333333333333</p>
</li>
</ul>
<ul>
<li>
<img src="images/4.jpg" />
<p>444444444444</p>
</li>
<li>
<img src="images/5.jpg" />
<p>55555555555555</p>
</li>
<li>
<img src="images/6.jpg" />
<p>66666666666</p>
</li>
</ul>
<ul>
<li>
<img src="images/7.jpg">
<p>77777777777777</p>
</li>
<li>
<img src="images/8.jpg">
<p>88888888888</p>
</li>
<li>
<img src="images/9.jpg">
<p>9999999999</p>
</li>
</ul>
</div>
</body>
</html>
这个是绝对定位的方式来实现的，主要先要用js算好left和top值。做的是固定三列。代码待优化。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pinterest</title>
</head>
<style>
*{margin:0; padding: 0;}
ul,li{ list-style: none}
.waterfall{width: 660px; height: auto; margin:20px auto; position: relative;}
li{ position: absolute;}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script>
/*
1,布局:定位
2，数据添加
b,定位布局，把所有的li放到一个ul里面，然后通过js给他们定位，这时候js要求就比较高，而数据添加就简单了直接把数据返回回来然后添加到ul当中就好了。这样写的一个缺点呢就是一定要获取到li的高度才可以，根据高度来算top值和left值
*/
/*
绝对定位布局
*/
window.onload=function(){
aposition();
var aUl = document.getElementById("ul1");
var aLi = document.getElementsByTagName("li");
var bBtn=true;
window.onscroll = function(){
var veiwHeight = document.documentElement.clientHeight;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var lastLi = aLi[aLi.length-1];
if(posTop(lastLi) < veiwHeight + scrollY && bBtn){
bBtn=false;
//alert(bBtn);
ajax("data.js?t="+new Date().getTime(),function(str){
var json=eval("(" + str + ")");
if(json.code){
bBtn=true;
}
for(var i=0;i<json.list.length;i++){
var list=json.list[i];
for(var j=0;j<list.src.length;j++){
var oLi =document.createElement("li");
oLi.innerHTML="<img src="+list.src[j]+" /><p>"+list.title[j]+"</p>";
//alert(oLi.innerHTML);
aUl.appendChild(oLi);
aposition();
}
}
});
}
};
//获取到屏幕的距离
function posTop(obj){
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
}
return top;
}
//定位布局三列
function aposition(){
var aLi = document.getElementsByTagName("li");
var aHeight = {L:[],C:[],R:[]};
for(var i=0;i<aLi.length;i++){
var iNow = i%3;
switch(iNow){
case 0:
aLi[i].style.left="5px";
hstep(aHeight.L);
break;
case 1:
aLi[i].style.left="240px";
hstep(aHeight.C);
break;
case 2:
aLi[i].style.left="475px";
hstep(aHeight.R);
break;
}
}
function hstep(dir){
dir.push(aLi[i].offsetHeight);
var step = Math.floor(i/3);
if(!step){
aLi[i].style.top=0;
}else{
var sum=0;
for(var j=0;j<step;j++){
sum += dir[j]+5;
}
aLi[i].style.top=sum+"px";
}
};
};
};
</script>
<body>
<div class="waterfall" id="div1">
<ul id="ul1">
<li>
<img src="images/1.jpg" />
<p>1111111111</p>
</li>
<li>
<img src="images/2.jpg" />
<p>222222222222222</p>
</li>
<li>
<img src="images/3.jpg" />
<p>333333333333</p>
</li>
<li>
<img src="images/3.jpg" />
<p>333333333333</p>
</li>
<li>
<img src="images/4.jpg" />
<p>444444444444</p>
</li>
<li>
<img src="images/5.jpg" />
<p>55555555555555</p>
</li>
<li>
<img src="images/6.jpg" />
<p>66666666666</p>
</li>
<li>
<img src="images/7.jpg">
<p>77777777777777</p>
</li>
<li>
<img src="images/8.jpg">
<p>88888888888</p>
</li>
<li>
<img src="images/9.jpg">
<p>9999999999</p>
</li>
</ul>
</div>
</body>
</html>
data.js
{
code:0,
list:[
{src:["images/1.jpg","images/2.jpg","images/3.jpg"],title:["1111","ssss","sdfsdf"]},
{src:["images/4.jpg","images/5.jpg","images/7.jpg"],title:["1111","ssss","sdfsdf"]},
{src:["images/3.jpg","images/6.jpg","images/8.jpg"],title:["1111","ssss","sdfsdf"]}
]
}
ajax.js
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失败了'+oAjax.status);
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
};
};
};
images里面的图片就自己在网上下载下来就可以了。我这里的图片的宽度是210px
2) 绝对寻址。即 Pinterest ，Mark之，KISSY ,花瓣网，百度图片，采用的方式:
今天的这篇博客就先讲出一种方式吧。后面两种2）和3）请期待后面的。。。。
相关推荐
总结，原生JS实现的瀑布流布局和无限加载结合了DOM操作、事件监听、布局计算等多个技术点。通过合理的优化策略，可以实现高效且用户体验良好的页面布局效果。在实际开发中，可以根据项目需求进行调整和定制，以满足...
原生JavaScript实现瀑布流效果，不依赖任何第三方库，可以更好地控制性能和兼容性，对于开发者来说是一次有趣的挑战。 首先，我们需要理解瀑布流的核心原理。瀑布流布局的关键在于计算每个元素的宽度和位置，使它们...
瀑布流布局，又称Masonry...总之，JS瀑布流效果是一种利用JavaScript动态调整元素布局的技术，通过合理地分配和排列元素，实现了视觉上引人入胜的页面展示。掌握这一技术，对于提升网页设计的用户体验有着重要的作用。
但在这个例子中，由于是小例子，可能没有使用这些库，而是通过原生JS编写。 7. **响应式设计**：一个好的瀑布流布局应当具备响应式，即能适应不同的屏幕尺寸和设备。这通常涉及到媒体查询（media queries）和灵活的...
在纯原生JavaScript实现无限瀑布流的过程中，主要涉及到以下几个关键知识点： 1. **元素尺寸计算**：瀑布流的关键在于元素的宽度和高度计算。由于元素的宽度通常是固定的，高度则需要根据相邻元素的位置进行动态...
【标题】原生JS简单瀑布流图片无限加载带鼠标悬停图片遮罩效果 瀑布流布局，也称为Masonry布局，是一种网页布局样式，其中各元素可以不等宽，但垂直对齐，形成类似瀑布的效果。这种布局常用于图片展示网站，如...
在原生JS实现瀑布流插件中，使用到了几个DOM属性，比如offsetHeight、offsetWidth、clientHeight和clientWidth等。offsetHeight属性用于获取元素的高度，包括元素的垂直内边距和边框；clientHeight是元素内容区域的...
实现瀑布流布局，JavaScript（简称js）扮演了关键角色。JavaScript允许我们动态地调整元素的位置，以适应不同的屏幕尺寸和内容数量。在描述中提到的“logo图片”和“图片”，在瀑布流布局中通常作为展示元素，它们的...
通过分析这个文件，你可以深入了解原生JavaScript如何实现瀑布流布局，同时也可以学习到如何处理DOM操作、事件监听以及响应式设计等重要概念。 总之，原生JavaScript实现的瀑布流布局是一个涉及DOM操作、响应式设计...
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
实现瀑布流布局的方式多种多样，可以选择使用原生的JavaScript，也可以使用jQuery插件，还可以利用CSS3的特性来简化布局实现。 ### 1. 使用原生JavaScript实现瀑布流布局 原生JavaScript实现瀑布流主要依赖于DOM...
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
但CSS3中没有直接的原生方法实现这一点，因此，这个"纯CSS3"实现可能涉及了一些技巧，如使用伪元素、负margin等，以模拟瀑布流的视觉效果。 综上所述，这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和...
在本示例中，我们将探讨如何使用原生JavaScript实现一个类似百度图片的瀑布流效果。 首先，我们需要理解瀑布流的核心原理。瀑布流布局的关键在于动态计算元素的宽度和排列位置，确保它们在垂直方向上对齐。这个过程...
瀑布流布局，又称Masonry布局，是一种常见的网页设计布局方式，尤其在图片展示类网站中广泛应用。...通过学习这个项目，开发者不仅可以理解瀑布流布局的原理，还能提升JavaScript编程和前端布局的技能。
2. **瀑布流布局原理**：瀑布流布局的核心在于根据屏幕宽度动态调整列数，并确保每个元素（通常是图片）在垂直方向上对齐。这种布局的关键在于计算每列的高度，当一列的高度超过其他列时，新的元素会添加到下一列，...
实现瀑布流布局的JavaScript方法主要有两种：一是使用原生JavaScript操作DOM，二是利用第三方库如Masonry或Isotope等。 在使用原生JavaScript实现瀑布流的过程中，我们通常需要编写逻辑来计算每行元素的高度，并对...