jQuery.lazyload+masonry改良圖片瀑布流代碼
更新時(shí)間:2014年06月20日 10:44:19 投稿:hebedich
這里主要是使用jQuery.lazyload配合masonry實(shí)現(xiàn)瀑布流的重新排列,有時(shí)候網(wǎng)站的速度慢,圖片加載慢,獲取不到圖片的寬度和高度,所以使用lazyload可以在圖片加載完之后,進(jìn)行瀑布流的重新排列。
實(shí)現(xiàn)方法如下:(這里只發(fā)jquery了,相關(guān)html代碼請(qǐng)各位自己腦補(bǔ)一下吧,我就不發(fā)了,哈哈)
/** * 自動(dòng)刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated: true }); }); var pre_href; //滾動(dòng) $(window).scroll(function(){ // 當(dāng)滾動(dòng)到最底部以上100像素時(shí), 加載新內(nèi)容 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) { ajax_load_data(); } }); function ajax_load_data(){ var href = $('#page-nav').find('.nextprev').attr('href'); if(href && href != pre_href){ console.log('href = '+href); pre_href = href; $.ajax({ url:href,//獲取元素列表的地址 data:{'act':'ajax_wap_index'}, dataType:'json', type:'post', beforeSend:function(){ show_loading_body(); }, complete:function(){ show_loading_body(); }, success:function(data){ if(data.status != undefined && data.status == 'ok'){ if(data.html){ var $boxes = $( data.html ); $container.append( $boxes ).masonry("appended", $boxes, true);//追加元素 $container.imagesLoaded(function () { $container.masonry(); });//加載完圖片后,會(huì)實(shí)現(xiàn)自動(dòng)重新排列?!具@里是重點(diǎn)】 } if(data.str_pages){ $('#page-nav').html(data.str_pages);//設(shè)置下一個(gè)分頁(yè)的地址?!究梢宰约貉a(bǔ)充】 } } } }); } }
您可能感興趣的文章:
- Jquery瀑布流插件使用介紹
- jQuery 瀑布流 浮動(dòng)布局(一)(延遲AJAX加載圖片)
- jQuery Masonry瀑布流插件使用詳解
- jQuery瀑布流插件Wookmark使用實(shí)例
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- jQuery 瀑布流 絕對(duì)定位布局(二)(延遲AJAX加載圖片)
- jQuery實(shí)現(xiàn)瀑布流布局
- jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼
- jQuery向下滾動(dòng)即時(shí)加載內(nèi)容實(shí)現(xiàn)的瀑布流效果
- jQuery實(shí)現(xiàn)動(dòng)態(tài)加載瀑布流
相關(guān)文章
發(fā)一個(gè)自己用JS寫(xiě)的實(shí)用看圖工具實(shí)現(xiàn)代碼
所以決定慢慢來(lái)照顧一下博客吧,這里先把眼前就有的一個(gè)小東西拿出來(lái)和大家分享一下,這是2006年的時(shí)候(文本里記下了時(shí)間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫(xiě)的。2008-07-07教你使用html+css制作一個(gè)3D立體相冊(cè)
這篇文章主要介紹了教你使用html+css制作一個(gè)3D立體相冊(cè),可以360度旋轉(zhuǎn)放置6張圖片,是不是很炫酷,快跟著小編一起來(lái)看看如何制作吧2023-03-03javascript實(shí)現(xiàn)網(wǎng)站頂部出現(xiàn)幾秒后圖片緩慢消失的效果
快過(guò)年了,很多網(wǎng)站首頁(yè)都放上了新春的祝福,有些是直接換成皮膚了,而有些則是用一張很大的圖片放在網(wǎng)站頂部,在倒數(shù)幾秒后,緩慢升上去直到最后消失。2011-01-01javascript 動(dòng)態(tài)調(diào)整圖片尺寸實(shí)現(xiàn)代碼
在自己的網(wǎng)站上更新文章時(shí)一個(gè)比較常見(jiàn)的問(wèn)題是:文章插圖太寬,使整個(gè)網(wǎng)頁(yè)都變形了。如果對(duì)每個(gè)插圖都先進(jìn)行縮放再插入的話,太麻煩了。2009-12-12