瀑布流 下拉無限載入 json非同步資料
阿新 • • 發佈：2019-01-25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style type="text/css"> /*這裡我們新增一些CSS定義*/#w h1 { color: #fff; font-size: 14px; line-height: 35px; padding: 5px; margin-bottom: 25px; background: #d85588; border-left: 5px solid #b44771; } h2 { font-size: 12px; font-weight: bold; overflow: hidden; /*white-space: nowrap; 不換行*/ line-height: 20px; } .linkc { width: 100%; } #morewrapper { text-align: center; padding: 30px; position: relative; } #morewrapper span { font-size: 14px; font-family: 'microsoft yahei' , Arial, sans-serif; color: #fff; border: 1px solid #D85588; padding: 10px 15px; background: #D85588; cursor: pointer; } /*如果需要新增一些CSS過渡效果，請新增如下程式碼*/.isotope, .isotope .isotope-item { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } </style> <!--倒入需要引用的JS類庫 --> <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.jribbble.min.js"></script> <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.isotope.min.js"></script> <script type="text/javascript" src="http://www.gbtags.com/gb/networks/uploads/06242ba0-40a1-45fd-946f-cc89e0df64c9/js/jquery.imagesloaded.min.js"></script> <script type="text/javascript"> var zxPage = 1; $(function() { //底部執行方法 下拉 $(window).bind('scroll', function() { show() }); function show() { if ($(window).scrollTop() + $(window).height() >= $(document).height()) { $('#showmore').text('載入中...'); loadshots(); } } //資料載入 //定義相關變數 var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore'); //定義isotope的初始引數 $wallcontent.isotope({ itemSelector: 'article' //定義頁面中那個元素作為isotope佈局元素 }); //定義使用者點選按鈕“載入更多”後的邏輯 function loadshots() { //這裡unbind點選事件 $showmore.off('click'); $(this).text('載入中...'); //這裡呼叫jdribble的相關API來獲取最流行的dribbble設計作品，如果你需要獲取其它資料，例如ajax在，這裡修改即可 $.ajax({ type: "post", dataType: "json", url: 'testzhou.aspx?NoCopyRight=1&type=ajax&Action=GetList' + '&Page=' + zxPage, cache: false, success: function(json) { if (json.productFwm.length > 0) { var items = []; $.each(json.productFwm, function(i, shot) { items.push('<article style="border-bottom: 2px solid #000000;width: 100%;">'); items.push('<div class="details" ><h2>發表者：' + shot.UserName + ' 發表時間：' + shot.Addtime + '</h2></div>'); items.push('<div class="details" style="font-size:12px;">' + shot.Contents + '</div>'); if (shot.Images != "") { items.push('<a href="' + shot.Images + '" target="_blank" class="linkc"><img src="' + shot.Images + '"></a>'); items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">'); items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/206/6/3213365a9a5aa98c.jpg">'); items.push('<img src="http://etp2012.wsdict.com:8000/upload/uploadfiles/logo.gif">'); items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">'); items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">'); } items.push('<div class="details"><h2>回覆數：' + shot.RepNum + ' 發表時間：' + shot.Addtime + '</h2></div>'); items.push('</article>'); }); var newEls = items.join(''), tmpcontent = $(newEls); $wallcontent.append(tmpcontent); //如果你需要載入內容中包含了圖片，可能需要預先載入，以避免佈局元素的疊加情況，程式碼如下： //$wallcontent.isotope('appended', tmpcontent).isotope('reLayout'); $wallcontent.imagesLoaded(function() { $wallcontent.isotope('appended', tmpcontent).isotope('reLayout'); //載入完成後重新bind事件 $showmore.text('載入更多>>').on('click', loadshots); }); //以上程式碼保證生成佈局前，所有圖片都已經載入 } else { $showmore.text('沒有更多資料'); //解除事件繫結 $(window).unbind("scroll"); return; } }, error: function() { alert('error'); } }); //end ajax zxPage++; } //繫結方法到載入更多按鈕 $showmore.on('click', loadshots); //最後我們新增一個自動點選效果，這樣使用者載入頁面自動會載入第一頁 $showmore.trigger('click'); }); </script> </head> <body> <!-- 首先我們設計HTML --> <div style="width: 400px; text-align: center; margin: 0 auto;"> <section id="w"> <h1>酒真快-社群論壇</h1></section> <section id="wallcontent"></section> <div id="morewrapper"> <span id="showmore">載入更多>></span> </div> </div> </body> </html>