Ecshop 基於jquery.more.js瀑布流的實現

瀑布流——是一種佈局方式，它的意思是隨着頁面滾動條向下滾動，頁面不斷的加載更多的內容。

在網絡查找“jquery.more.js實現瀑布流”可以找到一大把的內容，我是通過ecshop的實現方式，重新實現了一遍，我把“category"中的實現方式進行了簡化。

首先我們要建一個靜態的頁面模板（.dwt)，保存到手機端的模板目錄裏"mobile/themesmobile/mo_paleng_moban",下面我只列出了我要實現加載數據的模塊

<div class="weui-tab">
    <div class="weui-navbar">
        <a class="weui-navbar__item weui-bar__item--on" href="#tab1">
            全部
        </a>
        <a class="weui-navbar__item" href="#tab1">
            植物篇
        </a>
        <a class="weui-navbar__item" href="#tab1">
            動物篇
        </a>
    </div>
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <ul style="overflow-y: scroll;height:550px">
                <li>
                    <div class="list-left"><img src="../images/wuzhong.png" alt=""></div>
                    <div class="list-right">
                        <h1>同裏：一個自然與人和諧共處的家園</h1>
                        <p>在佔地1142.7公頃的同裏國家溼地公園，分佈着多樣的溼地......</p>
                        <div><span>2019-05-26</span><span>閱讀 1130</span></div>
                    </div>
                </li>
                <li>
                    <div class="list-left"><img src="../images/wuzhong.png" alt=""></div>
                    <div class="list-right">
                        <h1>同裏：一個自然與人和諧共處的家園</h1>
                        <p>在佔地1142.7公頃的同裏國家溼地公園，分佈着多樣的溼地......</p>
                        <div><span>2019-05-26</span><span>閱讀 1130</span></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

這個是我沒有改造過的內容，我這是通過一個weui-tab來實現分類加載數據列表，要使用weui得引入weui的相關庫（.js,.css)，這裏不做闡述。爲了方便加載數據，我三個tab使用了同一個tab list。

下面我要對它進行改造，以實現動態加載數據。

1 改寫"weui-navbar"動態加載分類標籤

<div class="weui-navbar">
        {foreach from=$cat_list item=cat name=name}
        <a class="weui-navbar__item {if $cat_id==$smarty.foreach.name.index} weui-bar__item--on {/if}" href="#listwrap">
            {$cat}
        </a>
        {/foreach}
    </div>

這裏我對它的標籤實現了動態加載數據，通過foreach循環加載了ecshop傳過來的分類列表。

2 改寫“weui-tab__bd”

<div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <!-- #BeginLibraryItem "/library/s_species_list.lbi" --><!-- #EndLibraryItem -->
        </div>
    </div>

在這裏我將列表封裝成了一個模板庫"s_species_list.lbi" ，.lbi文件是ecshop爲了更好的模塊化的一種文件，實際上也是html文本。它存儲在“mobile/themesmobile/mo_paleng_moban/lib“目錄中，內容如下：

<ul>
    {if $s_species_list}
    <div id="s_species_more" style="opacity: 1;" >
		<!-- 用來加載數據的標籤-->
        <div class="s_species single_item info"></div>
		<!-- 用來觸發加載更多的標籤（點擊）-->
        <a href="javascript:;" class="get_more" style="text-align:center">
            加載更多
        </a>
    </div>
    {else}
    <p class="s_species_title">抱歉暫時沒有相關結果，換個篩選條件試試吧</p>
    {/if}
</ul>

3.編寫js代碼

首先我們得調用jquery.more.js庫，由於jquery.more.js是基於jquery的，在這之前我們還要加載jquey.js庫

<script type="text/javascript" src="themesmobile/mo_paleng_moban/js/jquery.js"></script>
<script type="application/javascript" src="themesmobile/mo_paleng_moban/js/jquery.more.js"></script>

在頁面的<script></script>中加入如下代碼

var url = 's_species.php?act=ajax&cat_id={$cat_id}&id={$s_species.spe_id}&page=1&sort={$smarty.request.sort}&order={$smarty.request.order}';
    $(function () {
        $('#s_species_more').more({'address': url});
    });

在原生的jquery.more.js中可能沒有加入"滾動加載"方法，所有在"jquey.more.js"中我們要加入如下代碼

$(document).ready(function () {
        $(window).on('scroll', function () {
            if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
                $('.get_more').click();
            }
        });
    });

4 編寫php

接下來我們要在php中獲取數據給模板加載，

在php中我們得寫一個"ajax"方法

if ($action == 'ajax')
{
    include('includes/cls_json.php'); //引入json庫

    //獲取分頁等post請求參數
    $last = $_POST['last'];
    $amount = $_POST['amount'];
    $limit = "limit $last,$amount";
    $json = new JSON;

    $cat_id = isset($_REQUEST['cat_id'])  ? intval($_REQUEST['cat_id']) : 0;
    $keywords = empty($_REQUEST['keywords']) ? '' : trim($_REQUEST['keywords']);
    //分頁
    $page = isset($_REQUEST['page']) && intval($_REQUEST['page']) > 0 ? intval($_REQUEST['page']) : 1;
    $size = isset($_CFG['page_size']) && intval($_CFG['page_size']) > 0 ? intval($_CFG['page_size']) : 10;

    //排序
    $order =  'ASC';
    $sort =  'createtime';

    //獲取數據
    $s_species_list = get_species_list($cat_id,$size, $page, $sort, $order,$limit,$keywords);

    //生成數據
    foreach ($s_species_list as $val) {
        $smarty->assign('s_species', $val);
        $res[]['info'] = $GLOBALS['smarty']->fetch('library/s_species_list_ajax.lbi');
    }
    //返回數據
    die($json->encode($res));
}

瀑布流，其實就是不斷加載下一頁的過程，所有我們要代碼傳過來的分頁值，獲取該頁數據。獲取數據後，我們得實例化頁面數據，在這裏ecshop又使用了它的模板庫，我們將單條數據封裝成“s_species_list_ajax.lbi"，我們同樣將它存儲到“mobile/themesmobile/mo_paleng_moban/lib”目錄中。

{if $s_species.spe_id}
<li onclick="javascript:onSpeciesInfo({$s_species.spe_id})">
    <div class="list-left"><img src="./../{$s_species.spe_species_image}" alt=""></div>
    <div class="list-right">
        <h1>{$s_species.spe_name}</h1>
        <p>{$s_species.spe_content|truncate:20}</p>
        <div><span>{$s_species.date}</span><span>閱讀&nbsp;{$s_species.spe_read}</span></div>
    </div>
</li>
{/if}

在php中通過foreach遍歷數據列表，然後通過將單條數據定義成“s_species"對象，傳給smarty，smarty然後通過fetch將數據填入模板中，返回一個html文本，最後我們將數據存入一個數組中，以json編碼的方式返回給jquery.more.js處理加載。

這樣我們實現了瀑流加載，