jQuery ajax瀑布流加载静态的列表页面

1.加载一行数据

jQuery ajax瀑布流加载静态的列表页面

<script>
//滚动加载事件
var Loadurl = "{$url}";
if(window.location.href !== Loadurl){
window.location.href = Loadurl;
}
var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
// 异步加载
;(function($) {
var LoadContainer = "#list-ul-data-more"; //数据存放的容器ID
var Loading = "#spinnerIcn";//加载标志所在的容器CLASS
var pagenum = 1; //加载的页码,默认已经加载完第一页.
var isLoad = true; //是否在加载数据当中,是true,否false
$(window).on("resize scroll",function () {
var doc_T = $(document).scrollTop();
var win_H = $(window).height();
var loadTop = $(Loading).offset().top + $(Loading).children().height();
if(loadTop<= doc_T+win_H && isLoad && pagenum < pageTotal){
loadData();
} });
function loadData(){
isLoad = false;
pagenum++;
var url = Loadurl+pagenum+".shtml";
$.ajax({
url : url,
async : true,
type : 'get',
datatype: 'html',
success : function (html)
{
var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
$(LoadContainer).append(LoadHtml);
},
complete : function ()
{
isLoad = true;
if(pagenum >= pageTotal){
//设置正在加载标识
$("#spinnerIcn").hide();
} }
});
}
})(jQuery);
</script>

 2.三列数据,从最小的开始加载

jQuery ajax瀑布流加载静态的列表页面

    <script>
//滚动加载事件
var Loadurl = encodeURI("{$url}");
if(window.location.href !== Loadurl){
window.location.href = Loadurl;
}
var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
// 异步加载
;(function($) {
var LoadContainer = "#list-ul-data-more"; //数据存放的容器ID
var Loading = "#spinnerIcn";//加载标志所在的容器CLASS
var pagenum = 1; //加载的页码,默认已经加载完第一页.
var isLoad = true; //是否在加载数据当中,是true,否false
$(window).on("resize scroll",function () {
var doc_T = $(document).scrollTop();
var win_H = $(window).height();
var loadTop = $(Loading).offset().top + $(Loading).scrollTop() + $(Loading).height();
if(loadTop <= doc_T+win_H && isLoad && pagenum < pageTotal){
loadData();
} }); function loadData(){
isLoad = false;
pagenum++;
var url = Loadurl+pagenum+".shtml";
$.ajax({
url : url,
async : true,
type : 'get',
datatype: 'html',
success : function (html)
{
var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
$(LoadHtml).find('.three-col-item').each(function(i,v){
var li_html = $(v)[0].outerHTML;
var height = 0;
var ladElement = '';
$.each($('.col-md-4.three-col-wrap'),function(i,v){
if(i == 0){
height = $(this).height();
ladElement = $(this);
}else if(i > 0 && height > 0 && height > $(this).height()){
height = $(this).height();
ladElement = $(this);
}
});
ladElement.append(li_html);
}); },
complete : function ()
{
isLoad = true;
if(pagenum >= pageTotal){
//设置正在加载标识
$("#spinnerIcn").hide();
} }
});
}
})(jQuery);
</script>
 
...
...
 
 
 
...
...
 
 
上一篇:ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项


下一篇:ArrayList底层源码分析