也许是最简单的纯 CSS 实现瀑布流布局！！！ |
您所在的位置：网站首页 › 使用js实现瀑布流动的方法 › 也许是最简单的纯 CSS 实现瀑布流布局！！！ |
也许是最简单的纯 CSS 实现瀑布流布局！！！
|
效果图
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 以上解释还是比较好理解的，瀑布流大多时候采用在以图片为主的商品展示类网站中，比如：蘑菇街 本篇采用的或许是目前最简单的实现瀑布流的方式—— columns 多列布局 ，下面直接上代码。 CSS & HTML .box-wrapper { column-count: 6; column-gap: 0; } .box-item { box-sizing: border-box; break-inside: avoid; padding: 10px; } .box-item > div { height: 100%; background: #4286F5; box-sizing: border-box; } ...代码很简单，两三个 css 属性就解决了。其中的关键属性就是 column-count ，它用来定义列数。column-gap 定义列的间距，它会有个默认的间距。我这里采用 padding 来设置间距，因此要将它设为 0。 columns 多列布局 设计的初衷应该是为了实现类似报纸上那样的多栏阅读样式，它可以将一大段文字折成多列。因此在这里，子元素 div 也会在一些随机位置被折断。瀑布流布局主要展示图片之类的，如果折断必然不好看，这里可以采用 break-inside 来避免。 break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。 break-inside 有多个属性值不做赘述，这里采用 break-inside: avoid; 即可避免子元素被折断。 另外需要注意的是：多列布局的子元素高度一定要不一样，否则它可能会出现列数和预期的不一致。 区区几行 css 便能实现 参差不齐的多栏瀑布流布局 ，而 不断加载数据块并附加至当前尾部 则必须要 js 加以实现了。 瀑布流的懒加载实际应用中肯定是借助接口实现懒加载的数据的，这里为了方便用 js 生成数据，直接贴代码： const INITIAL_NUMBER = 40 const boxWrapper = document.querySelector('.box-wrapper') function createFragment(num) { const fragment = document.createDocumentFragment() for (let i = 0; i { document.body.removeChild(loading) boxWrapper.appendChild(fragment) }, 1000) } } function debounce(callback, delay) { let timer = null return function () { clearTimeout(timer) timer = setTimeout(callback, delay) } } window.addEventListener('load', init) window.addEventListener('scroll', debounce(scrollHandler, 100))滚动时判断是否触底，然后将模拟生成的 dom append 到父级中就行了，实现原理就这么简单😀。 更全更详细的代码点 这里 缺点多列布局实现瀑布流或许是最简单的方式，但是它有一个缺点。如果展示的内容需要排序或是直接就有序号的，它的排列是这样：
依照以上的排序方式，如果某个电商网站想要将热度高的商品排在前面就行不通了。并且随着数据的增多，它的排序会更加离谱，这就是多列布局的局限所在了。下一篇 ，我会实现一种类似 蘑菇街 的布局来解决这一缺点。 参考网上demo |
【本文地址】