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