JavaScript实现瀑布流以及加载效果-创新互联

一、瀑布流是个啥？

瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

最早采用瀑布流布局的网站是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;}

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。