標籤：
做前端這行的 能直接貼代碼就直接貼代碼了，不用多說什麼別的
效果需要引入jquery和jquery.masonry.min.js這兩個JS
JS代碼如下：
$(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 動畫效果配合[這段代碼不知道是哪位大神寫的 =_=感謝大神寫的這麼好的效果動畫]
/**** 轉變 ****/.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/73525
masonry結合json 製作無限滾動的瀑布流
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
