Realization of unlimited scrolling of albums based on jquery waterfall Flow Plugin

Similar layout, seems to appear at home and abroad on a large and small site, such as Pinterest (looks like the earliest use of this layout of the site), mark, mushroom street, Dot dot net, as well as Taobao the latest online "Wow" and so on. Typically, as the page scroll bar scrolls down, the layout continues to load data blocks and append to the current tail. So, we gave this layout an image of the name-waterfall flow style layout.

Masonry is a very good use of jquery page layout plug-ins, it can remove the gap between the different height Div, so that your page looks more neat, beautiful!

Website plugin download address and detailed address:

http://masonry.desandro.com/
Cases

The code is as follows

Copy Code

&lt;! DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/&gt; &lt;title&gt;jquery Waterfall Stream Plugin to achieve unlimited scrolling &lt;/title&gt; &lt;style type= "Text/css" &gt; *{margin:0; padding:0;} body {font:12px/1.5 Arial; color: #666; background: #fff;} ul,li{List-style:none;} img{border:0 none; . ssnav{height:40px; line-height:40px background: #333;} . Ssnav. sxo{overflow:hidden;zoom:1; width:960px; margin:0 auto; . Ssnav. Sxo li{Float:left; . ssnav. Sxo li A{color: #fff; text-decoration:none; padding:0 8px; Font-size:14px;font-family:microsoft Yahei; Float:left; Display:block;} . ssnav. Sxo Li a:hover{text-decoration:none; background: #555;} ddnav{height:50px line-height:50px; background: #111; width:960px; margin:0 auto 0;} . Ddnav. xdo{overflow:hidden;zoom:1;width:960px; margin:0 Auto; . Ddnav. Xdo li{float:left; background: #555; width:25%; display:inline; text-align:center;} . ddnav. Xdo li A{color: #fff; text-decoration:none; Font-size:22px;font-family:microsoft Yahei;display:block; Text-align:center;} . ddnav. xdo Li a:hover{text-decoration:none; background: #000;} . ddnav. Xdo li A.active{background: #54bfff;} . Tit-h1{font-size:34px;font-family:microsoft yahei;text-align:center padding:10px 0; color: #333; . ddback a{width:360px; margin:20px auto 0;font-size:26px;text-align:center; display:block; line-height:46px; height : 46px;font-family:microsoft Yahei;text-decoration:none; Background: #54bfff; Color: #fff;} . Ddback a:hover{Color: #fff; background: #666;} . sdcon{} . ddfooter{padding:8px 20px; background: #555; text-align:center; color: #fff;} . ddfooter a{text-decoration:none; color: #fff;} /*---------------------------------------Demo CSS--------------------------------------------* * Html{background:url (images/bg.gif);} *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} . Clearfix:after{content: "."; Display:block;height:0;clear:both;visibility:hidden;} . clearfix{display:inline-table;} /* Hides from IE-MAC * * *html. clearfix{height:1%;} . Clearfix{display:block;} /* End Hide from Ie-mac * * *+html. clearfix{min-height:1%;} body{font-family: "Helvetica Neue", Arial,sans-serif;font-size:12px;color: #444;} . demo{width:960px;margin:0 Auto;} . Demo H1{color: #3366cc font-size:16px;height:35px;line-height:1.9;text-align:center;border-bottom:1px Solid e5e5e5;margin:0 0 10px 0;} #retop {Position:fixed;bottom:10%;_position:absolute;width:25px;height:69px;background:url (images/topback.png) No-repeat;text-indent:-9em;overflow:hidden;display:none;} /**----------comparison element---------**/ /**** 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 change on container/* . transitions-enabled.infinite-scroll.masonry{-webkit-transition-property:none;-moz-transition-property:none;-o -transition-property:none;transition-property:none;} /* Unlimited Rolling 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/* Corrected IE6 vibration bug */{background-image:url (about:blank); background-attachment:fixed;} *html #infscr-loading{position:absolute;bottom:expression (eval (Document.documentElement.scrollTop));} * Showpic * * . showpic. Actions{display:none; . showpic:hover. Actions{display:block; . Showpic:hover Img{filter:alpha (opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;} . showpic{position:relative;float:left;margin:5px;_margin:5px 4px;border:solid 1px #ddd; width:178px;font-size:12px ; background: #fff; box-shadow:0 1px 3px Rgba (0,0,0,.3);-moz-box-shadow:0 1px 3px Rgba (0,0,0,.3);-webkit-box-shadow:0 1px 3px Rgba (0,0,0,.3);} . showpic. picbox{padding:15px 15px 0;text-align:center;} . showpic p{line-height:22px;margin:10px 0 0 0;padding:5px 10px;border-top:solid 1px #F5F2F2; background: #FAFAFA;} . showpic. actions{position:absolute;top:5px;left:0;z-index:3;width:100%; . showpic. Actions. lefter{float:left;margin:0 0 0 5px;display:inline;} . showpic. Actions. Righter{float:right;} . showpic. Actions. Righter a{margin:0 5px 0 0;} /* Button * . button{ Display:inline-block; Text-decoration:none; Font:bold 12px/12px Helveticaneue, Arial; PADDING:8PX 11px; Color: #555; border:1px solid #dedede; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; Cursor:pointer; } . button.white{ Background: #f5f5f5; Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #f9f9f9 ', endcolorstr= ' #f0f0f0 '); /* IE * * Background:-webkit-gradient (linear, left top, left bottom, from (#f9f9f9), to (#f0f0f0)); * WebKit * * Background:-moz-linear-gradient (Top, #f9f9f9, #f0f0f0); Border-color: #dedede #d8d8d8 #d3d3d3; Color: #555; text-shadow:0 1px 0 #fff; -webkit-box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; -moz-box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; box-shadow:0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb; } . button.white:hover{ Border-color: #c7c7c7 #c3c3c3 #bebebe; text-shadow:0 1px 0 #fdfdfd; -webkit-box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; -moz-box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; box-shadow:0 1px 1px #ebebeb, inset 0 1px 0 #f3f3f3; } . button.white:active{ Background: #f4f4f4; Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #eeeeee ', endcolorstr= ' #f8f8f8 '); /* IE * * Background:-webkit-gradient (linear, left top, left bottom, from (#eeeeee), to (#f8f8f8)); * WebKit * * Background:-moz-linear-gradient (Top, #eeeeee, #f8f8f8); Border-color: #c7c7c7 #c3c3c3 #bebebe; text-shadow:0 1px 0 #fdfdfd; -webkit-box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd; -moz-box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd; box-shadow:0 1px 1px #ebebeb, inset 2px 2px 2px #dddddd; } /*-----------------------------------------------------------------------------------*/ </style> <script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script> <!----------------------------------------------------Demo JS----------------------------------------------------> <script type= "Text/javascript" src= "Js/jquery.masonry.min.js" ></script> <script type= "Text/javascript" src= "Js/jquery.infinitescroll.min.js" ></script> <!-------------------------------------------------------------------------------------------------------- > <body> &lt;div class= "Demo" &gt; &lt;div id= "Container" class= "transitions-enabled infinite-scroll clearfix" &gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery hover photo effects, mouse over picture animate animation zoom display "class=" Txpic "src=" Images/01.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery hover picture effects, mouse over picture animate animation zoom display &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery image special effects plug-in products 3D panorama product picture Display effect "class=" Txpic "src=" images/ 02.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery Picture Effect Plug-in products 3D panorama product picture Display &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery image amplification effect mouse slide over picture floating layer display "src=" images/03.jpg &gt; &lt;/div&gt; &lt;p&gt;jquery hover picture magnifying glass effect make single row picture when the mouse over the picture, large picture floating in small figure above the larger display. &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery image delayed loading imitation petal net first picture wave stripes arrange loading "class=" Txpic "src=" images/ 04.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery picture delayed loading imitation petal mesh home picture wave stripes Arrange loading &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery Spotlight Plug-ins make jquery picture effects mouse over picture current picture highlight "class=" Txpic "src=" Images/05.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery Spotlight Plugin make jquery picture special effects mouse over picture current picture highlight &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery image switching with jquery lazyload picture delay loading plug-ins combined with special effects "class=" Txpic "src=" Images/06.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery picture switching with jquery lazyload picture delay loading plugin with special effects &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" target= "_blank" &gt;&lt;img width= "" alt= "jquery picture scrolling picture zoom Show with tab Slide tab label picture scrolling" class= "txpic" src= "images /07.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery Picture scrolling picture zoom display with tab sliding tab label picture scrolling &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery pop-up effects animate create a pop-up layer like Flash animation effect "class=" Txpic "src=" Images/08.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery pop-up layer special effects animate make Flash animation effect pop-up layer &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" JS pop-up layer effects Click the button pop-up window support mouse drag "class=" Txpic "src=" Images/09.jpg " Style= "Display:block;" &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;js Pop-up effect click the button pop-up window support mouse drag &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery pop-up layer click on the button pop-up layer compatible IE and Firefox browser "class=" Txpic "src=" images /10.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery Pop-up Layer click button pop-up layer compatible IE and Firefox browser &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery pop-up plugin mouse click Text get title pop-up content information "class=" Txpic "src=" images/ 11.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery Pop-up Layer plugin mouse click text get title pop-up content information &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery pop-up plug-ins thickbox multi-function pop-up plug-ins support images, Ajax, inline content bombs, such as "class=" txpic "Src=" images/12.jpg "style=" display:block; &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;jquery pop-up layer plug-in thickbox multi-function pop-up layer plug-in support images, Ajax, inline content bombs, etc. &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" jquery Framework and Coffeescript make iphone apple iOS phone main screen touch effect "src=" images/ 13.jpg "/&gt;&lt;/a&gt; &lt;/div&gt; The &lt;p&gt;jquery framework combines with Coffeescript to make an iphone Apple phone's iOS phone interface with the main touchscreen finger across the screen to slide around the entire image of the touch effect. jquery downloads. &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "target=" _blank "&gt;&lt;img width=" "alt=" div+css layout controls the display of "class=" Txpic "src=" by a style that centers the picture vertically and horizontally. images/ 14.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; The &lt;p&gt;div+css layout controls the vertical center and horizontal display of the picture with a style &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "target=" _blank "&gt;&lt;img width=" "alt=" div+css tutorials Top or news list most standard div CSS style sheet code "class=" Txpic "src=" Images/15.jpg "style=" Display:block; " &gt;&lt;/a&gt; &lt;/div&gt; &LT;P&GT;DIV+CSS Tutorials Top or news list most standard div CSS style sheet code &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class= "box Showpic" &gt; &lt;div class= "Picbox" &gt; &lt;a href= "" "target=" _blank "&gt;&lt;img width=" "alt=" div+css production IE6 simulation fixed absolute browser positioning layer box does not blink "IE6" class= "Src=" images/16.jpg "style=" display:block; &gt;&lt;/a&gt; &lt;/div&gt; &lt;p&gt;div+css made on IE6 with absolute simulation fixed IE6 browser positioning layer frame does not blink &lt;/p&gt; &lt;div class= "Actions" &gt; &lt;div class= "Lefter" &gt;&lt;a class= "button white" href= "#" &gt; Comments &lt;/a&gt;&lt;/div&gt; &lt;div class= "Righter" &gt;&lt;a class= "button white" href= "#" &gt; Like &lt;/a&gt;&lt;a class= "button white" href= "#" &gt; Share &lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--Container end--&gt; <div id= "Page-nav" ><a href= "pages/2.html" ></a></div><!--page-nav end--> &lt;/div&gt; &lt;script type= "Text/javascript" &gt; $ (document). Ready (function () { var $container = $ (' #container '); $container. imagesloaded (function () { $container. Masonry ({ Itemselector: '. Box ', Columnwidth:5//The gap between each two columns is 5 pixels }); }); $container. Infinitescroll ({ Navselector: ' #page-nav ',//Selected pager Nextselector: ' #page-nav a ',//select Next link to (2nd page) Itemselector: '. Box ',//Choose to retrieve all items Loading: { Finishedmsg: ' No more pages to load. ', IMG: ' Images/loading.gif ' } },function (newelements) { Hide new items while they are loading var $newElems = $ (newelements). css ({opacity:0}); Ensure the image loading increases the masonry layout $newElems. imagesloaded (function () { Element Presentation Preparation $newElems. Animate ({opacity:1}); $container. Masonry (' appended ', $newElems, true); }); } ); $ (' &lt;a href= "#" id= "Retop" &gt; Back to Top &lt;/a&gt; "). Appendto (' body '). fadeout (). Click (function () { $ (document). scrolltop (0); $ (this). Fadeout (); return False }); var $retop = $ (' #retop '); function Backtopleft () { var btleft = $ (window). Width ()/2 + 478; if (btleft &lt;= 950) { $retop. css ({' Left ': 955}) }else{ $retop. css ({' Left ': Btleft}) } } Backtopleft (); $ (window). Resize (backtopleft); $ (window). Scroll (function () { if ($ (document). scrolltop () = = 0) { $retop. fadeout () }else{ $retop. FadeIn () } if ($.browser.msie &amp;&amp; $.browser.version = = 6.0 &amp;&amp; $ (document). ScrollTop ()!== 0) { $retop. css ({' Opacity ': 1}) } }); }); &lt;/script&gt; <!-------------------------------------------------------------------------------------------------------- > </div></div> </body>

Picture height bug Fix:
because of the speed of the network transmission, when the browser loaded the DOM, but the IMG image has not been loaded, the plug-in in the calculation of image height and positioning, there will be errors, in Firefox and Chrome is the most obvious, especially Google Chrome.

reason: in the Chrome browser test, in the picture loading process, IMG's width and height are all 0, and in IE, the browser first to IMG Set the width and height, so this plugin in IE under the normal use, but in chrome will be wrong. And this plugin to see the official image demo is also so, the box layer does not dynamically generate a height value to the layout.

The solution is to have all the pictures loaded before executing the masonry () method