引入:template.js
请求数据方法:
<script type="text/javascript">
$(function() {
/*瀑布流*/
var page = 2;
var loading = false;
$(window).scroll(function() {
if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) {
loadMore();
}
});
function loadMore() {
if (loading === false) {
loading = true;
$(".loadmore").show();
$.get("/pc_ajax_data", {catid: {$catid}, page: page}, function(list) {
if (list.status) {
page++;
$("#J_load_content").append(template("storyTemplate", {list: list.data}));
loading = false;
$(".loadmore").css('display', 'none !important');
} else {
$(".loadmore").text("没有更多了");
}
}, 'json');
} else {
return;
}
}
});
</script>遍历数据:
<script id='storyTemplate' type="text/html">
{{each list as value key}}
<li><a href="{{value.url}}" title="{{value.title}}"><img width="289" height="{{value.height}}" src="{{value.thumb}}" alt="{{value.title}}">
<h5>{{value.title}}</h5>
<p>{{value.subtitle}}</p>
<span class="ico-detail"><i class="uzicofont uzico-shipin1"></i></span>
</a>
</li>
{{/each}}
</script>