masonry結合json 製做無限滾動的瀑布流

時間 2019-11-20

標籤 masonry 結合 json 製做無限滾動瀑布欄目 JavaScript 简体版

原文原文鏈接

作前端這行的能直接貼代碼就直接貼代碼了，不用多說什麼別的javascript

效果須要引入jquery和jquery.masonry.min.js這兩個JSphp

JS代碼以下：css

$(document).ready(function(){
	var $container = $('.space_main_con1 .con');
	var animated;	
	var i=1;
	//判斷是否須要 masonry.js這個裏面提供動畫  若是是IE瀏覽器而且版本低於9.0 則添加動畫  不然就用 css3的動畫（css3的動畫代碼在下面有貼出） 
	$.browser.msie && $.browser.version < 9.0 ? animated = true : animated = false;		
	$container.imagesLoaded(function(){
		$container.masonry({
			itemSelector: '.space_item',
			columnWidth:288,
			gutterWidth:16,//每兩列之間的間隙爲5像素
			isAnimated: animated,
			animationOptions: {
				duration: 400,
				easing: 'linear',
				queue: false
			}
		});
	});
	
	$(".space_item").live("mouseover",function(){
		$(this).addClass("on");
	})
	$(".space_item").live("mouseout",function(){
		$(this).removeClass("on");
	});	
	function getMore(){
		$("#infscr-loading").show();  
		var json = "json.php";
		$.getJSON(json, function(data){  
			$.each(data,function(i){
				var url=data[i].url; 
				var img=data[i].img;
				var user=data[i].user;
				var space=data[i].space;
				var time=data[i].time;
				var content=data[i].content;
				var simg=data[i].simg;
				var pname=data[i].pname;
				var pprice=data[i].pprice;
				html='<div class="space_item"><a class="p_img" href="'+url+' target="_blank"><img src="'+img+'" width="260" height="260" /></a><p class="author">達人：<a href="'+space+'" target="_blank">'+user+'</a></p><p class="time">發佈時間：'+time+'</p><div class="arrow"></div><div class="content">'+content+'</div><div class="cfix pro_box"><a class="p_simg" target="_blank" href="'+url+'"><img src="'+simg+'" width="50" height="50" /></a><div class="p_info"><p class="p_name"><a target="_blank" href="'+url+'">'+pname+'</a></p><p class="p_price">￥'+pprice+'</p></div></div></div>';	
				$boxes = $(html).css({ opacity: 0 });
				$boxes.animate({opacity:1});
				$container.append($boxes).masonry('appended',$boxes,true);
			});
			i=1;	    
			$("#infscr-loading").hide();
		});
	};	
	//滾動到底部的時候
	$(window).bind("scroll",function(){
		if( $(document).scrollTop() + $(window).height() + $(".footer").outerHeight()-100 > $(document).height() && i==1) {
			i=0;
			getMore();			
		}
	});
});

另外有一段比較好看的css3 動畫效果配合[這段代碼不知道是哪位大神寫的 =_=感謝大神寫的這麼好的效果動畫]html

/**** 轉變 ****/
.transitions-enabled .masonry,.transitions-enabled.masonry .masonry-brick{-webkit-transition-duration:0.7s;-moz-transition-duration:0.7s;-o-transition-duration:0.7s;transition-duration:0.7s;}
.transitions-enabled .masonry{-webkit-transition-property:height, width;-moz-transition-property:height, width;-o-transition-property:height, width;transition-property:height, width;}
.transitions-enabled .masonry .masonry-brick{-webkit-transition-property:left, right, top;-moz-transition-property:left, right, top;-o-transition-property:left, right, top;transition-property:left, right, top;}
/* 禁用容器上的轉變 */
.transitions-enabled .infinite-scroll.masonry{-webkit-transition-property:none;-moz-transition-property:none;-o-transition-property:none;transition-property:none;}
/* 無限滾動裝載機 */
#infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
#infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}
*html,*html body /* 修正IE6振動bug */{background-image:url(about:blank);background-attachment:fixed;}
*html #infscr-loading{position:absolute;bottom:expression(eval(document.documentElement.scrollTop));}
#page-nav{display:none;}

對應的HTML代碼以下：前端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>masonry結合json 製做無限滾動的瀑布流</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
</head>
<body>
<div class="space_main space_main_con1">
        <div class="con transitions-enabled infinite-scroll">
        	<div class="space_item">
                <a class="p_img" href="#" target="_blank"><img src="tmp/xinpin/n1.jpg" width="260" height="260" /></a>
                <p class="author">達人：<a href="#" target="_blank">grapecxh</a></p>
                <p class="time">發佈時間：2014-12-24</p>
                <div class="arrow"></div>
                <div class="content">
                    評論內容評論內容評論內容評論內容評論內容評論內容評論內容評論內容評論內容評論內容評論內容
                </div>
                <div class="cfix pro_box">
                    <a class="p_simg" target="_blank" href="#"><img src="tmp/xinpin/n1.jpg" width="50" height="50" /></a>
                    <div class="p_info">
                        <p class="p_name"><a target="_blank" href="#">商品名稱商品名稱商品名</a></p>
                        <p class="p_price">￥68</p>
                    </div>
                </div>
            </div>
            <!--還有更多相同如上省略了-->
        </div>
</div>

</body>
</html>

相關的另一位大神寫了一篇文章，這篇就是根據這位大神寫的修改而來的大神寫的代碼連接：http://my.oschina.net/mmeng/blog/73525java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。