I'm working on a site that the requested functionality is like the galleries on the Cargo collective: http://cargocollective.com/learnsomethingeveryday

I found this plugin, which looks like it does exactly what I need it to, which is to float elements up instead of just left or right: http://desandro.com/resources/jquery-masonry

Here is the development site, (link removed) -- as you can see, when you click the gallery boxes to expand them, the boxes rearrange leaving blank spaces. I asked the plugin developer if he could help me figure out why the boxes weren't moving up like his demos, but he said they were supposed to do that? Which didn't seem right, but ... I'm stumped.

I've tried using list items, divs, you name it. I've tried so many CSS options it's crazy. I've probably spent ten or fifteen hours just banging my head against this wall, and no matter what I do, nothing floats "up".

Can anyone help?

  • Well, I kinda have a feeling the behaviour is correct. If the layout is supposed to be top-down then left-right, seems pretty OK to me. Are you able to sketch out something of what it is supposed to be vs what it is now? o.k.w almost 7 years ago

4 answers

Mottie 1134
3
points
This was chosen as the best answer

Hiya!

I've never used the masonry plugin before, so I had to mess around with it.. it appears that adding two item selectors is the cause of the problems. When I changed the masonry call to the code below, it started working :) Happy Holidays!

$('#content').masonry({
 singleMode: false,
 resizeable: true,
 columnWidth: 250,
 itemSelector: '.outer',
 saveOptions: true
});

Additionally, I noticed that some images were still on top of the open div, so I modified the .open class as follows:

.open {
 position: relative;
 top:0;
 left:0;
 height:630px;
 width:740px;
 background-color:white;
 margin-right:10px;
 margin-bottom:10px;
 margin-top:0px;
 margin-left:0px;
 border:0px;
 z-index: 200;
}
Answered almost 7 years ago by Mottie
0
points

dotlizard, would you mind if I borrow your code to do something similar on a site I'm working on?

Answered almost 7 years ago by 3stripe
  • Thanks for asking :) The site's not even live yet (I shouldn't have left the link up, really), but I suppose if you DO NOT copy the design (colors, sizes, etc) it would be ok. But that's not my design, and that part is completely under copyright. I didn't add any copyrights to my code, though, and much of it was open source to begin with. dotlizard almost 7 years ago
azz0r 0
0
points

I am also having the same problem! Its very frustrating and I'm not sure I understand the point of columnWidth, isnt the whole point of this plugin to re-size multiple columns and divs to avoid a rigid design?!

If you could take a look at my code, please note: it is hardcore gay pornography, if it un-nerves you, please do not click: http://www.eurocreme.com/default/index/whats-new

Answered over 6 years ago by azz0r
-1
points

Oh thankyou thankyou thankyou! I feel so incredibly relieved at this point you have no idea.

Answered almost 7 years ago by dotlizard
  • You should add your comments as comments and not as separate answers. Robert Koritnik almost 7 years ago