## 瀑布流分页 瀑布流ajax分页，结合content标签对列表分页。 ## 参数 | 参数名称 | 可选值 | 默认值 | 是否必填 | 说明 | | --- | --- | --- | --- | --- | | auto | 1/0 | 0 | - | 1=自动加载，0=手动触发 | | num | - | 默认同content标签的num属性保持一致 | - | 每次加载条数 | | icon | - | 加载中... | - | 加载中的提示文字，也可以是图片 | | empty | - | 暂无更多数据 | - | 最后一页的提示信息 | ## 参数说明 `auto` 是否自动加载属性，1=滚动到位置时，开始加载下一页。默认是0=手动点击加载数据，写法如下： 调用标签后会有`{$item}`变量，将该变量赋值到标签上即可。 ~~~ {hkcms:wfpage auto="1"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>点击加载更多</a> </div> {/hkcms:wfpage} ~~~ `num` 每页记录数属性，默认同content标签的num一致。 ~~~ {hkcms:wfpage num="2"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>点击加载更多</a> </div> {/hkcms:wfpage} ~~~ `icon` 加载显示的内容，默认是`加载中...`，除了文字，也支持html，html写法如下： ~~~ {php}$icon = '<img src="/asset/201911/icon.jpg">';{/php} {hkcms:wfpage num="2" icon="$icon"} <div class="text-center"> <a href="javascript:void(0);" class="btn btn-primary" {$item.click}>点击加载更多</a> </div> {/hkcms:wfpage} ~~~ ## 使用说明 详细步骤如下，示例根据默认模板人才招聘演示： 1. 设置`content`内容列表标签的上级html标签 id="contentlist"，这个名字可以随意取，设置后跟tagid属性保持一致 2. 在你的模板目录新增`common/page_contentlist.html`文件，里面的内容就放`content`标签包裹的内容。 page_contentlist文件名称格式为：page_(tagid属性里填写的名称).html 3. 然后就可以调用wfpage瀑布流分页标签 效果图，看不清的话鼠标到图片右键保存或者新窗口打开：  成功后会有个按钮显示。  <br /> 简单代码示例： ~~~ // 设置ID、与下面的tagid一致 <div id="contentlist"> {hkcms:content catid="$Cate['id']" num="6" page="1" tagid="contentlist"} <p><a href="{$item.url}">标题：{$item.title}</a></p> {/hkcms:content} </div> ~~~ 引用瀑布流分页标签 ~~~ {hkcms:wfpage } <div class="text-center"> <button type="button" class="btn btn-primary" {$item.click}>点击加载更多</button> </div> {/hkcms:wfpage} ~~~ 4. common/page_contentlist.html 文件内容就是hkcms:content 标签包裹的内容 ~~~ <p><a href="{$item.url}">标题：{$item.title}</a></p> ~~~ <br /> > 若想自定义分页处理函数，可在页面上定义get_page_list方法： ~~~ <script> function get_page_list(obj, key) { } </script> ~~~