瀑布流布局JavaScript实现
瀑布流布局的自适应列高和不规则排布，用在图片展示上真是太合适了，像 Pinterest 那种页面，看着就舒服。
图片展示页的利器就是瀑布流布局，尤其适合做类似蘑菇街、Pinterest 那类内容繁多又尺寸不一的页面。它的最大特点就是：每列高度不固定，根据图片大小自动排布，视觉上比较舒服，没那么呆板。
布局上，多人现在喜欢用Flexbox或CSS Grid，但老派浮动法其实也还挺实用，像float: left配合固定宽度，就能实现一个基础版本，简单粗暴。
加载内容时配个滚动监听就丝滑了。用$(window).scroll()判断用户快到底部了，就去拉新数据，配合Ajax搞个异步求，把新图片塞进来。
数据回来了之后，就得动手动态插入内容了。这里你可以先算下每列的高度，再挑最矮那列加内容，保持整体视觉的平衡感。别忘了加个loading 指示器，让用户知道你不是卡住了。
再讲点实用的：移动端显示一定要注意响应式设计，比如用@media调整每行列数，屏幕窄了就少放几列。体验会好多。
一个点，不得不提的就是懒加载。别一口气加载全部图片，那样太吃流量，滚动加载配上loading="lazy"属性，性能提升。
哦对了，老浏览器的话，Grid不兼容，那就考虑降级用浮动或者 jQuery 插件，比如Isotope，兼容性会好点。
如果你是刚入门的前端，想搞点动态交互的页面，推荐你试试“puBuliu”项目，代码清晰，思路直白，适合练手。
文件大小：201.88KB
评论区