jQuery.lazyload+masonry改良圖片瀑布流代碼
更新時間:2014年06月20日 10:44:19 投稿:hebedich
這里主要是使用jQuery.lazyload配合masonry實現(xiàn)瀑布流的重新排列,有時候網(wǎng)站的速度慢,圖片加載慢,獲取不到圖片的寬度和高度,所以使用lazyload可以在圖片加載完之后,進(jìn)行瀑布流的重新排列。
實現(xiàn)方法如下:(這里只發(fā)jquery了,相關(guān)html代碼請各位自己腦補(bǔ)一下吧,我就不發(fā)了,哈哈)
/** * 自動刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated: true }); }); var pre_href; //滾動 $(window).scroll(function(){ // 當(dāng)滾動到最底部以上100像素時, 加載新內(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(); });//加載完圖片后,會實現(xiàn)自動重新排列。【這里是重點(diǎn)】 } if(data.str_pages){ $('#page-nav').html(data.str_pages);//設(shè)置下一個分頁的地址。【可以自己補(bǔ)充】 } } } }); } }
相關(guān)文章
發(fā)一個自己用JS寫的實用看圖工具實現(xiàn)代碼
所以決定慢慢來照顧一下博客吧,這里先把眼前就有的一個小東西拿出來和大家分享一下,這是2006年的時候(文本里記下了時間,不然也忘記了)為了自己看網(wǎng)絡(luò)圖片方便而寫的。2008-07-07javascript實現(xiàn)網(wǎng)站頂部出現(xiàn)幾秒后圖片緩慢消失的效果
快過年了,很多網(wǎng)站首頁都放上了新春的祝福,有些是直接換成皮膚了,而有些則是用一張很大的圖片放在網(wǎng)站頂部,在倒數(shù)幾秒后,緩慢升上去直到最后消失。2011-01-01javascript 動態(tài)調(diào)整圖片尺寸實現(xiàn)代碼
在自己的網(wǎng)站上更新文章時一個比較常見的問題是:文章插圖太寬,使整個網(wǎng)頁都變形了。如果對每個插圖都先進(jìn)行縮放再插入的話,太麻煩了。2009-12-12js實現(xiàn)圖片顯示局部,鼠標(biāo)經(jīng)過顯示全部的效果
2008-01-01