jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
jquery masonry與infinitescroll兩款瀑布流插件制作當(dāng)下最流行的瀑布流圖片展示實(shí)例,通過鼠標(biāo)滾動(dòng)圖片無限加載的類似瀑布的效果的圖片展示。用戶可以無限瀏覽圖片或內(nèi)容無限加載瀑布流效果。
代碼:
<script type="text/javascript"> function item_masonry(){ $('.item img').load(function(){ $('.infinite_scroll').masonry({ itemSelector: '.masonry_brick', columnWidth:226, gutterWidth:15 }); }); $('.infinite_scroll').masonry({ itemSelector: '.masonry_brick', columnWidth:226, gutterWidth:15 }); } $(function(){ function item_callback(){ $('.item').mouseover(function(){ $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)'); $('.btns',this).show(); }).mouseout(function(){ $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)'); $('.btns',this).hide(); }); item_masonry(); } item_callback(); $('.item').fadeIn(); var sp = 1 $(".infinite_scroll").infinitescroll({ navSelector : "#more", nextSelector : "#more a", itemSelector : ".item", loading:{ img: "images/masonry_loading_1.gif", msgText: ' ', finishedMsg: '木有了', finished: function(){ sp++; if(sp>=10){ //到第10頁結(jié)束事件 $("#more").remove(); $("#infscr-loading").hide(); $("#page").show(); $(window).unbind('.infscr'); } } },errorCallback:function(){ $("#page").show(); } },function(newElements){ var $newElems = $(newElements); $('.infinite_scroll').masonry('appended', $newElems, false); $newElems.fadeIn(); item_callback(); return; }); }); </script>
演示圖片
以上所述就是本文的全部?jī)?nèi)容了,希望能夠?qū)Υ蠹覍W(xué)習(xí)jQuery有所幫助。
- jQuery Masonry瀑布流插件使用詳解
- jQuery.lazyload+masonry改良圖片瀑布流代碼
- PHP+Jquery與ajax相結(jié)合實(shí)現(xiàn)下拉淡出瀑布流效果【無需插件】
- jQuery瀑布流插件Wookmark使用實(shí)例
- Jquery瀑布流插件使用介紹
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- iOS中滑動(dòng)控制屏幕亮度和系統(tǒng)音量(附加AVAudioPlayer基本用法和Masonry簡(jiǎn)單使用)
- iOS App開發(fā)中Masonry布局框架的基本用法解析
- IOS自適配利器Masonry使用指南
- jQuery Masonry瀑布流插件使用方法詳解
相關(guān)文章
jquery動(dòng)態(tài)更換設(shè)置背景圖的方法
這篇文章主要介紹了jquery動(dòng)態(tài)更換網(wǎng)頁背景圖的方法,需要的朋友可以參考下2014-03-03jQuery插件HighCharts實(shí)現(xiàn)的2D回歸直線散點(diǎn)效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)的2D回歸直線散點(diǎn)效果,結(jié)合實(shí)例形式分析了jQuery基于HighCharts插件繪制直線散點(diǎn)圖形的具體相關(guān)操作步驟與實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQuery實(shí)現(xiàn)自動(dòng)調(diào)用和觸發(fā)某個(gè)事件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)調(diào)用和觸發(fā)某個(gè)事件的方法,結(jié)合實(shí)例形式列舉分析了jQuery事件觸發(fā)的常見操作技巧,需要的朋友可以參考下2016-11-11