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处理加载。

这样我们实现了瀑流加载，