Stack Overflow
Stack Overflow

Questions tagged [jquery-masonry]

Masonry is a dynamic grid layout plugin for jQuery

Masonry is a dynamic grid layout plugin for that works by placing elements in optimal position based on available vertical space.

Think of it as the flip-side of CSS floats: whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.

The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

1239 questions
95
votes
2 answers

Differences between Isotope and Masonry jQuery plugins

I recently discovered the Masonry and Isotope JQuery plugins. They seem to be functionally almost identical and both appear to have the same author. The only obvious difference I can see is the license. What are the main differences between these…
Dónal
  • 176,670
  • 166
  • 541
  • 787
63
votes
9 answers

Is it possible to create a pinterest-like layout with Bootstrap only?

I am trying to the get my head around this for quite some time now: Is it possible to create a pinterest Layout with Twitter Bootstrap only? I know there are jQuery Plugins like Masonry, but is there no way without them? Thanks
Matt
  • 1,653
  • 3
  • 15
  • 15
31
votes
13 answers

jQuery Masonry and Ajax Append Items?

I am trying to use some ajax and the jQuery Masonry plugin to add some items - but for some reason the new items aren't getting the masonry applied ? I'm using jQuery.ajax({ type: "POST", url: ajax_url, data: ajax_data, cache:…
Andy
  • 15,873
  • 12
  • 40
  • 52
22
votes
7 answers

Masonry JS Overlapping Items

I have a very strange problem in here: [Referral Link Removed]. The first row product items overlapped with the items in the second row. The masonry items are below the homepage above the footer. As you can see, it looks different with Chrome. In…
Jed
  • 1,444
  • 8
  • 30
  • 60
19
votes
5 answers

How to use jQuery Masonry with elements of different width?

I am implementing the jQuery Masonry plugin, but I have problems with elements wider than one column, meaning that the div width of all Masonry elements is not identical. Could anybody help me with this?
Eric
  • 201
  • 1
  • 2
  • 3
19
votes
6 answers

Combining LazyLoad and Jquery Masonry

I have been trying to piece together masonry and moo tools lazyload however they both dont seem to go very well together although it possibly could just be because I am slightly useless at coding! The masonry works on this page. However when I try…
user554954
  • 191
  • 1
  • 2
  • 4
17
votes
5 answers

Using Masonry.JS and Vue.JS

I know how to use masonry.js apart from vue. However, I'm having issue getting it to function and be called correctly inside of the vue framework. I called it inside of the created or ready but neither seem to get the grid to form correctly. How can…
Ricki Moore
  • 1,093
  • 4
  • 23
  • 44
16
votes
2 answers

Masonry with Bootstrap 3

When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still…
bswinnerton
  • 3,970
  • 6
  • 37
  • 50
16
votes
1 answer

jQuery: Plugin like masonry to overcome dom-order and 3 item sizes

this might be tough to explain. Is there a similar plugin like jQuery masonry that is able to detect spaces in a predefined grid and move and position elements that would fit into this spaces? Since all other ways of explaining my question would be…
matt
  • 37,699
  • 99
  • 250
  • 390
15
votes
4 answers

jQuery masonry with percentage width

is there a way to get jquery masonry working with percentage width divs? I'm trying to create a fluid layout with 25%, 50%, 75% and 100% widths. But as soon as i set the widths with % the automatic resizing stops working, and if I try to manually…
joe_g
  • 557
  • 1
  • 4
  • 15
14
votes
12 answers

jquery masonry breaks(stacks images) in chrome/safari but only on first load

It seems that when I try to load the page, all the images are stacked on top of one another. But if you were to click a link which takes you to the same page (like the home link) then masonry kicks in. So I think masonry is loading too early, like…
rugbert
  • 9,753
  • 9
  • 35
  • 60
14
votes
2 answers

Centering elements in isotope

Hello everyone and I hope you're doing well. I am using Isotope and below you can see the JavaScript that I have written. I find it impossible to center li elements if they are the Isotope elements. To see what I mean by centering, please see the…
justme
  • 517
  • 1
  • 3
  • 18
14
votes
1 answer

Masonry.js failing on load. Cannot call 'create' of undefined (Outerlayer) in Wordpress

So I've got a strange problem that I can't seem to find anywhere else, regarding masonry.js. I've got the latest (3.10) version and I'm including it in my wordpress theme's functions.php file as so: function enqueue () { wp_register_script(…
josh
  • 543
  • 5
  • 20
13
votes
1 answer

Responsive Masonry jQuery layout example

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout? http://tympanus.net/codrops/collective/collective-2/ Specifically; The number of columns changes from 3 to 2 to 1 on browser resize which is what you…
robflate
  • 177
  • 1
  • 1
  • 9
13
votes
1 answer

jQuery Masonry from bottom up

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple…
Aen Tan
  • 3,141
  • 6
  • 28
  • 49
1
2 3
…
82 83