jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
jquery masonry與infinitescroll兩款瀑布流插件制作當(dāng)下最流行的瀑布流圖片展示實(shí)例,通過(guò)鼠標(biāo)滾動(dòng)圖片無(wú)限加載的類似瀑布的效果的圖片展示。用戶可以無(wú)限瀏覽圖片或內(nèi)容無(wú)限加載瀑布流效果。
代碼:
<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頁(yè)結(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)下拉淡出瀑布流效果【無(wú)需插件】
- jQuery瀑布流插件Wookmark使用實(shí)例
- Jquery瀑布流插件使用介紹
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- iOS中滑動(dòng)控制屏幕亮度和系統(tǒng)音量(附加AVAudioPlayer基本用法和Masonry簡(jiǎn)單使用)
- iOS App開(kāi)發(fā)中Masonry布局框架的基本用法解析
- IOS自適配利器Masonry使用指南
- jQuery Masonry瀑布流插件使用方法詳解
相關(guān)文章
jquery創(chuàng)建并行對(duì)象或者合并對(duì)象的實(shí)現(xiàn)代碼
如果有對(duì)象A ,B 現(xiàn)在我想要合并成對(duì)象C 從C里面可以找到A , B 及其子對(duì)象 怎么做2012-10-10
jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼
下面小編就為大家分享一篇jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能 jQuery實(shí)現(xiàn)計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)功能,jQuery實(shí)現(xiàn)計(jì)時(shí)器功能的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
自動(dòng)完成功能是指:類似百度搜索之類的輸入一個(gè)詞的一部分后就自動(dòng)提示,然后用戶可以選擇,不需要再輸入剩余部分。2011-08-08
jquery 插件開(kāi)發(fā) extjs中的extend用法小結(jié)
在jquery中,extend其實(shí)在做插件時(shí)還是用的比較多的,今天同時(shí)小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下2013-01-01
基于jQuery的計(jì)算文本框字?jǐn)?shù)的代碼
用戶邊輸入計(jì)算同時(shí)進(jìn)行,告訴用戶還剩余多少可輸入的字?jǐn)?shù),當(dāng)超過(guò)規(guī)定的字?jǐn)?shù)后,點(diǎn)擊確定,會(huì)讓輸入框閃動(dòng)2012-06-06
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果,在網(wǎng)頁(yè)應(yīng)用中還是比較流行的,下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,喜歡的朋友可以參考下2013-08-08
jquery ready()的幾種實(shí)現(xiàn)方法小結(jié)
下面是目前本人知道的幾種jQuery的ready ()的寫(xiě)法.如果還有其他的寫(xiě)法,望告知2010-06-06
jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)
本篇文章主要是對(duì)jquery實(shí)現(xiàn)省市select下拉框的替換(示例代碼)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02

