Masonry combine JSON to make unlimited scrolling waterfall streams

The front line can be directly affixed to the code directly, do not say anything else

The effect requires the introduction of jquery and Jquery.masonry.min.js two JS

The JS code is as follows:

$ (document). Ready (function () {var $container = $ ('. Space_main_con1. Con '), var animated;var i=1;//to determine if a Masonry.js This inside provides animation if it is IE browser and version is less than 9.0 add animation otherwise use CSS3 animation (CSS3 animation code is posted below) $.browser.msie && $.browser.version & Lt 9.0? Animated = true:animated = false; $container. imagesloaded (function () {$container. Masonry ({itemselector: '. Space_item ') , columnwidth:288,gutterwidth:16,//the gap between each of the two columns is 5 pixels 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" &GT;<a class= "p_img" href= "' +url+ ' target=" _blank "></a> <p class= "Author" > Talent: <a href= "' +space+ '" target= "_blank" > ' +user+ ' </a></p><p class= "time "> Release 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+ '" ></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 ();});};/ /scroll to the bottom of the time $ (window). Bind ("scroll", function () {if (document). ScrollTop () + $ (window). Height () + $ (". Footer"). Outerheight () -100 > $ (document). Height () && i==1) {I=0;getmore ();});}); 

  There is another good-looking CSS3 animation effect fit [This code does not know who the great God wrote =_= thanks to the great God wrote so good effect animation]

/**** transformation ****/.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;} /* Disable transition */.transitions-enabled on the container. infinite-scroll.masonry{-webkit-transition-property:none;- Moz-transition-property:none;-o-transition-property:none;transition-property:none;} /* Infinite Scroll loader */#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/* Fix IE6 Vibration bug */{background-image:url (about:blank); background-attachment:fixed;} *html #infscr-loading{position:absolute;bottom:expression (eval (Document.documentElement.scrollTop));} #page-nav{display:none;}

  corresponding HTML code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Related to another great God wrote an article, this is based on the great God written by the Great God wrote the code link: http://my.oschina.net/mmeng/blog/73525
Masonry combine JSON to make unlimited scrolling waterfall streams