利用layui的flow实现信息流-滚动加载

环境：tp3.2+layui
html，设置一个包裹层

<div id="pyq-content" class="pyq-content"></div>

js，需要注意 scrollElem 这个参数需要填写！！

layui.use('flow', function () {
				var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
				var flow = layui.flow;
				flow.load({
					elem: '#pyq-content' //指定列表容器
					,
					scrollElem: '#pyq-content',
					isAuto: true,
					done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
						var lis = [];

						var data = { page: page };
						var url = "{:U('pyq/pyqpage')}";
						$.post(url, data, function (res) {
							//res字符串转为json
							res = $.parseJSON(res);

							//假设你的列表返回在data集合中
							layui.each(res.data, function (index, item) {
								//先判断item.pyq_duotu 数组是否存在，存在的话，输出成html保存到js中，然后放到下面push中。
								var duotuarr = item.pyq_duotu;   //多图数组
								var arrnum = item.pyq_duotu.length;	 //多图数组长度
								var temp = '';	//如果有数组，将数组拼装成html放到temp中

								if (arrnum > 0) {
									//大于0，说明这一条有图片
									for (var i = 0; i < arrnum; i++) {
										temp = temp + '<li><figure style="background-image:url(' + duotuarr[i] + ')" data-src="' + duotuarr[i] + '" class="figure-list-img"><a href="javascript:;"></a></figure></li>';

									}
									temp = '<ul class="e03" thumblist="list' + item.pyq_id + '">' + temp + '</ul>';
								}

								// lis.push('<li>' + item.pyq_content + '</li>');
								lis.push('<div class="m03pyq clear"><div class="d00"><img src="' + item.mb_img + '" alt=""></div><div class="d01"><p>' + item.mb_name + '</p><p class="e01">' + item.pyq_content + '</p>' + temp + '<p class="e02">' + item.pyq_time + '</p></div></div>');
							});





							//切换图状态禁止页面缩放	
							document.addEventListener('touchstart', function (event) {
								if (event.touches.length > 1 && swiperStatus) {
									event.preventDefault();
								}
							})
							var lastTouchEnd = 0;
							document.addEventListener('touchend', function (event) {
								var now = (new Date()).getTime();
								if (now - lastTouchEnd <= 300) {
									event.preventDefault();
								}
								lastTouchEnd = now;
							}, false)

							document.addEventListener('touchmove', function (e) {
								if (swiperStatus) {
									e.preventDefault();
								}
							})

							//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
							//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
							next(lis.join(''), page < res.pages);
						});

					}
				});
			});

php

public function pyqpage(){
    $num = I('post.page');
    if (!empty($num)) {
        $pyq     = M('Pyq');
        $offset = 5*($num-1); //每页5个，偏移量
        $pyqinfo = $pyq->join('LEFT JOIN zq_member on zq_pyq.pyq_member = zq_member.mb_id')->limit($offset, 5)->where('pyq_state=1')->order('zq_pyq.pyq_time desc')->select();
        //需要将每个里面的图片，转换为数组，再赋值给前端
        // dump($pyqinfo);
        foreach ($pyqinfo as $key => &$value) {
            $array_duotu        = explode(',', $value['pyq_duotu']);
            $array_duotu        = array_filter($array_duotu);
            $value['pyq_duotu'] = $array_duotu;

            //格式化时间戳，传给前端
            $value['pyq_time'] = date("m-d H:i:s", $value['pyq_time']);
        }

        //符合条件的数量 
        $count = count($pyq->where('pyq_state=1')->select());
        //每页显示多少，例如1页显示5条
        $ci = ceil($count / 5);

        $res = array('data' => $pyqinfo, 'pages' => $ci);
        echo json_encode($res);
    }
}

通过以上步骤，发现需要点击一下 按钮才可以 继续加载，这里有一点需要注意，就是css, 包裹层需要设置一个高度 ，即可。

        <style>
        .pyq-content {
            position: relative;
            overflow: auto;
            clear: both;
            height: 600px;
        }
        </style>