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
13
votes
4 answers

Masonry & LazyLoad doesn't want to work together

I am setting up a site for a photographer. It should be built using the Bootstrap 3 framework, and he wants to have a masonry with over 400 images on one page. For this to work LazyLoad is a must. I have now spent several days trying to get LazyLoad…
no0ne
  • 2,569
  • 8
  • 25
  • 40
13
votes
1 answer

Masonry images overlapping above each other

I am working on a masonry layout for an image gallery. But masonry most of the time displays images overlapped on one another. Rest of the time its ok and sometimes some image divs overflow onto the div below their enclosing div. How to contain…
Steve Robinson
  • 3,598
  • 3
  • 29
  • 50
12
votes
2 answers

Jquery Masonry height issue

I have a simple masonry grid. When it loads the .content class is visible. When you reload the items flow in to each other. This only happen in Chrome and Safari, in Firefox it looks good. Here is the css from the grid: #media_list {} #media_list…
papacostas
  • 828
  • 1
  • 9
  • 23
12
votes
1 answer

How to run masonry only after all html5 videos are loaded with infinitescroll?

masonry infinite scroll append html5 videos overlapping i am currently using imagesLoaded library which checks whether images are loaded then calls masonry. But it was not working with html5 video tag, because of this videos gets overlapped on one…
user1642018
11
votes
3 answers

Randomize bricks in Masonry

is it possible to randomize the bricks in the JQuery plugin Masonry so that every time the page loads a different arrangement is viewed? There is no option for random as far as I can tell. Thanks!
Dave
  • 111
  • 1
  • 4
11
votes
1 answer

How to center Masonry Items?

I have set up masonry to display items as such: $('#list').masonry({ itemSelector: '.propitem', columnWidth: 230 }); This works, but all items (.propitem) float to the left. For example if my container #list is 600px wide there will be two…
MeltingDog
  • 11,060
  • 34
  • 130
  • 238
11
votes
5 answers

TypeError: $(...).masonry is not a function

I want to load a Masonry view of some images but an error occurs: TypeError: $(...).masonry is not a function HTML Code:
Zisu
  • 485
  • 2
  • 6
  • 24
11
votes
5 answers

jQuery Masonry sort order left to right rather than top to bottom?

Using Masonry on a catalog site. By default, the items displayed sort by date, then by part number. My images are varying height. The problem is, and correct me if I'm wrong, Masonry sets row 2, item 1 below the shortest item in row 1 rather than on…
Justin Graber
  • 111
  • 1
  • 4
11
votes
2 answers

jquery masonry images are overlapping until a page resize is done

I've found this template that demonstrates the issue I'm having with jquery masonry and image layout. Take a look at this twitter bootstrap template page: The very first time the page is loaded all the images are stacked on each other until a page…
Paul
  • 11,011
  • 28
  • 81
  • 137
10
votes
5 answers

Can Masonry use as RTL (Right-To-Left) direction

Masonry worked fine with the text direction from LTR (Left-To-Right). Now I want to use masonry with the text direction RTL (Right-To-Left [Middle eastern languages such as Hebrew and Arabic are written predominantly right-to-left.] ). Whenever I…
Dawood Butt
  • 456
  • 6
  • 22
10
votes
3 answers

Using masonry with imagesloaded

I'm a js newbie and hope this questions doesn't seem too stupid. I'm using masonry for my site - works fine. I wanted to let my boxes appear just when masonry finished loading. Searching in the internet I found several posts recommending to use…
CaraMar
  • 197
  • 1
  • 3
  • 17
10
votes
2 answers

Execute jQuery once document is ready AND iframe content is loaded

As you can see on this page http://musicglaze.com/chase-status-let-you-go-feat-mali-feed-me-remix/#comments comment section is way out of place, After research I understood that it is caused because plugin responsible for styling…
Ilja
  • 35,872
  • 66
  • 218
  • 401
10
votes
3 answers

jQuery Masonry item order

How can I get masonry to respect more of the original item order here? I would like the order to be dolphins, fish, invertebrates, pinnipeds: var $container = jQuery('.tax-product_cat #content'); $container.imagesLoaded( function(){ …
Merrill Mayer
  • 113
  • 1
  • 1
  • 5
9
votes
2 answers

Masonry Grid Continuous Loop Scroll

So I'm trying to achieve a continuous loop effect on a page that contains a masonry grid. Basically I have a full page masonry grid that I want to loop on scroll up or down. Currently I have this: var $grid = $('.grid').masonry({ itemSelector:…
Corey
  • 2,163
  • 4
  • 30
  • 56
9
votes
1 answer

What are the options for having a masonry like layout with flexbox with resizable and sortable elements

In my angular app, I'm using ui-sortable to sort an
    . The elements itself are resizable. This is similar to the setup I have: And I would like that "4" and "5" use the space on top of them: Here is a fiddle. Please note that this is an…
Trufa
  • 35,711
  • 41
  • 118
  • 180
1
2
3
…
82 83