jquery - Masonry js won't bunch images vertically -


The picture is being aligned horizontally, but all of these are vertical. Take a look here to see what I mean ..

My markup is as follows (simplified): 

  & lt; Html & gt; & Lt; Top & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery-latest.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "http://masonry.desandro.com/jquery.masonry.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; Var $ Container = $ ('Portfolio-Container'); $ Container.imageloaded (function () {$ container.masonry ({item selector: '.break', column wdth: 42 9});}); & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; .break {float: left; Width: 42 9px; Margin: 10px 20px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "portfolio-container" & gt; & Lt ;? Php do {? & Gt; & Lt; Div class = "break" & gt; // Content taken from MySQL // & lt; / Div & gt; & Lt ;? Php} while ($ row_displayPosts = mysql_fetch_assoc ($ displayPosts)); ? & Gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 I think a part of it is working but as you can see from the link, these elements do not stand together. Does anyone have any signs?  
 Action update:  
  & lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {var $ container = $ ('portfolio-container'); $ container.image loaded (function () {$ container.masonry ({item selector: '.break', column Wythth: 42 9, Gutterwidth: 40 // Gator added to simulate margin;}}}});}); & lt; / script & gt;    
 
 
 You need to create your script JQuery dom:  
  $ (document) .ready (function () {Var $ container = $ ('portfolio-container'); $ container.images loaded (function Masonry ({item selector: '.break', column Wideth: 42 9});});});   
 Masonry does not really exist on your page This is the reason why your elements have just started and have not arranged how you expect them.  
 Edit:  
 You can download the page and After playing with it it seems that you also need to remove:  
  margin: 10px 20px;   
 your  .break  Class  
  wrapping masonry script in $ (document). Already   
 I suspect that there are makinbg for stacking your margin elements to widen the side

Comments

Post a Comment