JavaScript实现瀑布流和加载效果

一、什么是瀑布流？

瀑布流是一种流行的网站页面布局，其视觉特征是多列布局不均匀。当页面滚动条向下滚动时，该布局将持续加载数据块，并将它们附加到当前尾部。

Pinterest是最早采用瀑布流布局的网站，在国内逐渐流行起来。比如我们熟悉的百度图片的布局。很久以前，百度图片需要逐页点击才能查看更多图片，但现在的瀑布流布局让用户查找图片更加方便。

二、瀑布流的优缺点

优点：

1.节省页面空间，不再需要导航和页码按钮。

2.提升用户体验，让用户的体验更多的在于浏览图片，而不是找出如何找到下一页和切换操作。

缺点：

1.使用的网页类型有限：

这种瀑布式布局只适用于某些特定类型产品中的某些特定类型的内容。

比如我们在某个宝里面买东西的时候，需要在第一页就记住要买哪个产品，然后再回去买。这个时候，我们需要我们的页面按钮来帮助我们记忆，但是瀑布流就更麻烦了。

2.永远看不到的页脚：

如果我们使用瀑布流无限滚动加载模式，这意味着我们永远看不到我们的页脚。当用户一次次浏览到页面底部，看到页脚时，由于自动加载的内容突然出现，无论如何都无法点击页脚中的链接或登录，那么用户的体验极其糟糕，他们可能会愤怒地关闭你的网页。

3.关于页数：

对于用户来说，使用瀑布式自动加载代替传统的换页非常方便，但是对于开发者的网站来说，页面的缩减可能并不能展现更多的相关信息，最明显的就是广告的缩减。

三、瀑布流的写法和原理

瀑布流是什么样子的？现在让我们写一个简单的瀑布流布局。首先把凌乱的基本风格和布局敲小一点~这里我们不缩进是为了节省空间~

CSS:

* { margin : 0；padd : 0；} # wrap { width: 840pxmargin: 0 autoborder: 1px纯黑；飞越：隐藏；} # wrap ul { width: 200pxmargin: 0 5px向左浮动：} #包装ul li { width: 200pxlist-style:无；margin : 10px 0；background: palegreenfont-size : 50px；color:白色；文本对齐：中心；}HTML:

div id=' wrap ' ul/ul/ul/ul/div以下是一个简单的JS代码：

var wrap=document . queryselector(' # wrap ')；var ul=document . queryselectorall(# wrap ul ')；//声明元素块//创建一个随机数函数函数random (min，max) {return math。random()*(max-min 1)min；}//创建另一个函数来添加li，函数创建Li(num){ for(var I=0；因纽姆；I){ var NElli=document . create element(' Li ')；//创建line wli . style . height=random(100，400)' px '；//使用随机数函数创建不同高度的Li var arrul=[]；//存储并比较ul的高度(var j=0；七月长度；j ){ arrul.push(ul[j])。右偏)；//存储ul } var minhAiR=arrul[0]的高度；var minIndex=0；for(var k=0；karrul.lengthk){ if(minhArtarul[k]){ minhArtau=arrul[k]；//将ul与最短高度进行比较，并将其分配给Minh h8 minIndex=k；//将高度最短的ul下标赋给minindex}} ul [minindex]。append child(new Li)；//将li} }createLi(15)添加到高度最短的ul；//执行函数，添加15 li的，//创建滚动事件窗口. onscroll=function () {//html总高度-可视窗口高度=滚动高度of=body//兼容编写var scroll top=document . body . scroll top；var client height=document . document element . client height | | document . body . client height | | window . inner height；if(document . document element . offset theight-client height=scroll top){ createLi(15)；} }//当卷轴差不多在底部，但还没有的时候，执行函数，新建一个li，这样就可以实现没有页脚的自动加载瀑布流布局了。

四.摘要

瀑布流只是页面容器中高度不固定的多个容器之间内容的不均匀添加。鼠标滚动时，不断在容器尾部加载数据，并自动加载到空缺位置，即示例中高度最短的位置，并保持循环。

瀑布流对于展示图片来说既高效又有吸引力。用户可以通过快速阅读模式在短时间内获取更多信息，瀑布流自动加载避免了鼠标点击的翻页操作。

瀑布流的主要特征是拼凑。固定宽度不固定高度的设计，使页面区别于传统的矩阵图片布局模式，巧妙利用视觉层次。随意流动的视线缓解了视觉疲劳，给人一种不拘一格的感觉。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。