YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » jQuery » jQuery Plugins » Infinite Scroll & Masonry–jQuery 瀑布流布局插件实例

Infinite Scroll & Masonry–jQuery 瀑布流布局插件实例

程序简介:

Infinite Scroll & Masonry是两个非常不错的 jQuery 插件,利用这两个插件我们就可以很容易的实现时下流行的瀑布流布局。作为商品展示和图片分享展示,这个效果是再合适不过了。看看效果吧:

Infinite Scroll & Masonry – jQuery 瀑布流布局插件实例

// 调用代码
(function(){
		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 >= 5) { //到第10页结束事件
							$("#more").remove();
							$("#infscr-loading").hide();
							// $("#page").removeClass('hide');
							$(window).unbind('.infscr');
						}
					}
				},
				errorCallback: function(){
					$("#page").removeClass('hide');
				}
				
			}, function(newElements){
				var $newElems = $(newElements);
				$('.infinite_scroll').masonry('appended', $newElems, false);
				$newElems.fadeIn();
				item_callback();
				return;
			});
			
		});
	})();

下载地址:waterfall.zip

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:Infinite Scroll & Masonry–jQuery 瀑布流布局插件实例

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)