jquery 插件實現(xiàn)瀑布流圖片展示實例
jquery masonry與infinitescroll兩款瀑布流插件制作當下最流行的瀑布流圖片展示實例,通過鼠標滾動圖片無限加載的類似瀑布的效果的圖片展示。用戶可以無限瀏覽圖片或內(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>演示圖片

以上所述就是本文的全部內(nèi)容了,希望能夠?qū)Υ蠹覍W(xué)習(xí)jQuery有所幫助。
- jQuery Masonry瀑布流插件使用詳解
- jQuery.lazyload+masonry改良圖片瀑布流代碼
- PHP+Jquery與ajax相結(jié)合實現(xiàn)下拉淡出瀑布流效果【無需插件】
- jQuery瀑布流插件Wookmark使用實例
- Jquery瀑布流插件使用介紹
- bootstrap配合Masonry插件實現(xiàn)瀑布式布局
- iOS中滑動控制屏幕亮度和系統(tǒng)音量(附加AVAudioPlayer基本用法和Masonry簡單使用)
- iOS App開發(fā)中Masonry布局框架的基本用法解析
- IOS自適配利器Masonry使用指南
- jQuery Masonry瀑布流插件使用方法詳解
相關(guān)文章
jquery創(chuàng)建并行對象或者合并對象的實現(xiàn)代碼
如果有對象A ,B 現(xiàn)在我想要合并成對象C 從C里面可以找到A , B 及其子對象 怎么做2012-10-10
jQuery實現(xiàn)倒計時功能 jQuery實現(xiàn)計時器功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)倒計時功能,jQuery實現(xiàn)計時器功能的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09
基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
自動完成功能是指:類似百度搜索之類的輸入一個詞的一部分后就自動提示,然后用戶可以選擇,不需要再輸入剩余部分。2011-08-08
jquery 插件開發(fā) extjs中的extend用法小結(jié)
在jquery中,extend其實在做插件時還是用的比較多的,今天同時小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下2013-01-01
jquery ready()的幾種實現(xiàn)方法小結(jié)
下面是目前本人知道的幾種jQuery的ready ()的寫法.如果還有其他的寫法,望告知2010-06-06
jquery實現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對jquery實現(xiàn)省市select下拉框的替換(示例代碼)進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

