前端頁(yè)面瀑布流如何實(shí)現(xiàn)下拉加載更多？

使用瀑布流標(biāo)簽配合js就能實(shí)現(xiàn)頁(yè)面下拉加載更多。

瀑布流調(diào)用標(biāo)簽

<div id='與artlist標(biāo)簽的tagid名稱(chēng)一致'>
{eyou:artlist typeid='欄目ID' row='10' tagid='唯一的標(biāo)簽名稱(chēng)'}
    <a href='{$field.arcurl}'>{$field.title}</a>
{/eyou:artlist}
</div>
{eyou:artpagelist pagesize='3' tagid='與artlist標(biāo)簽的tagid名稱(chēng)一致' tips='沒(méi)有數(shù)據(jù)了'}
    <a id='gengduo' href="javascript:void(0);" {$field.onclick}>加載更多</a>
{/eyou:artpagelist}

實(shí)現(xiàn)下拉觸發(fā)加載更多的js

<script>
    //監(jiān)聽(tīng)滾動(dòng)事件
    let timer = null;
    document.addEventListener('scroll', function () {
    clearTimeout(timer);
    //判斷是否滾動(dòng)到 底部
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50){
        timer = setTimeout(function(){
        document.getElementById( 'gengduo').click();
        },300)
        }
    });
</script>