如何向使用Colcade.js实现的瀑布流网格追加加载更多条目？

colc.append() 方法支持传入单个DOM元素、DOM元素数组、NodeList对象、选择器字符串四种类型的参数，只要传入的元素类名和你初始化Colcade时配置的item选择器匹配即可，方法会自动完成插入和瀑布流重排布。

1. 定义全局状态 #

先声明分页控制变量和Colcade实例存储变量，避免重复初始化：

// 你原有的名言数组
var quotes = [
    {
        'author': 'Rahul Morajker',
        'quote': `Upcoming Guest`,
        'image': 'img/guests/rahul.jpg',
        'ig': 'morajker',
        'marks': false
    },
    {
        'author': 'Akash Lamani',
        'quote': `Quote here`,
        'image': 'img/guests/akash.jpg',
        'ig': 'aakash_5520',
        'marks': true
    },
    {
        'author': 'Soham Naik',
        'quote': `Quote here`,
        'image': 'img/guests/soham.jpg',
        'ig': 'soham_scientist',
        'marks': true
    },
    {
        'author': 'Navish Naik',
        'quote': `Quote here`,
        'image': 'img/guests/navish.jpg',
        'ig': 'navish_naik',
        'marks': true
    },
    {
        'author': 'Aaron Vaz',
        'quote': `Quote here`,
        'image': 'img/guests/aaron.jpg',
        'marks': true
    }
]
// 分页配置
const PAGE_SIZE = 4
let currentPageIndex = 0
let colcadeInstance = null

2. 封装DOM生成方法 #

统一把名言对象转换为符合Colcade要求的DOM节点：

function buildQuoteDom(quoteData) {
    const itemEl = document.createElement('div')
    // 替换为你自己的条目类名，要和Colcade初始化的item配置一致
    itemEl.classList.add('grid-item')
    // 替换为你自己的条目渲染逻辑
    itemEl.innerHTML = `
        <img src="${quoteData.image}" alt="${quoteData.author}头像">
        <p class="quote-text">${quoteData.quote}</p>
        <p class="quote-author">—— ${quoteData.author}</p>
        ${quoteData.ig ? `<span class="ig-account">@${quoteData.ig}</span>` : ''}
    `
    return itemEl
}

3. 初始化页面和瀑布流 #

初始只加载前4条数据：

function initPage() {
    const gridContainer = document.querySelector('.grid-container') // 替换为你自己的瀑布流容器选择器
    // 渲染第一页数据
    const firstPageData = quotes.slice(0, PAGE_SIZE)
    const firstPageDomList = firstPageData.map(buildQuoteDom)
    gridContainer.append(...firstPageDomList)
    // 初始化Colcade，替换为你自己的配置参数
    colcadeInstance = new Colcade(gridContainer, {
        columns: '.grid-column', // 替换为你自己的列选择器
        item: '.grid-item' // 和上面的条目类名保持一致
    })
    currentPageIndex = 1
}
// 页面加载完成后执行初始化
window.addEventListener('DOMContentLoaded', initPage)

4. 绑定加载更多按钮事件 #

点击时追加新数据到瀑布流：

document.querySelector('#load-more-btn').addEventListener('click', function() {
    const startIdx = currentPageIndex * PAGE_SIZE
    const endIdx = startIdx + PAGE_SIZE
    const nextPageData = quotes.slice(startIdx, endIdx)
    // 没有更多数据时禁用按钮
    if (nextPageData.length === 0) {
        this.disabled = true
        this.textContent = '已加载全部内容'
        return
    }
    // 生成新页面对应的DOM数组
    const nextPageDomList = nextPageData.map(buildQuoteDom)
    // 直接传入DOM数组给append方法即可，自动完成排布
    colcadeInstance.append(nextPageDomList)
    currentPageIndex += 1
})

注意事项：

• 不需要手动把新生成的DOM插入到容器中，append方法会自动处理插入和排布逻辑
• 确保新生成的条目的类名和初始化Colcade时的item配置完全一致，否则无法被识别排布

内容的提问来源于stack exchange，提问作者pexeixv