Questions tagged [masonry]

Masonry, formally jQuery Masonry, is a JavaScript cascading grid layout library.

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

As of version 3, Masonry does not depend on jQuery anymore, but it can work alongside.

Created by David DeSandro, Masonry is released under the permissive MIT License.

Useful links

950 questions
0
votes
1 answer

Jquery masonry and infinite scroll combine

i do combine Jquery masonry and infinite scroll http://jsfiddle.net/9tWw9/

1

0
votes
1 answer

Infinite Scroll + Masonry

I am trying to get infinite scroll to work with Masonry. +function ($) { var $container = $('.masonry'); $container.imagesLoaded(function(){ $container.masonry({ columnWidth: '.grid-sizer', gutter: '.gutter-sizer', …
Nick Toye
  • 75
  • 1
  • 2
  • 11
0
votes
1 answer

Masonry add a loader at the bottom to show more images are still loading

I am using masonry to load in lot's of images, I have it setup so that the images gradually load in (append) rather than having lots of white space on the page. You can see working live version here to help show what I mean. However as the images…
probablybest
  • 1,403
  • 2
  • 24
  • 47
0
votes
1 answer

Masonry doesn't work

I want to use Masonry cascading grid layout library on my code but it doesn't work. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code:
AmirHussein
  • 96
  • 1
  • 9
0
votes
0 answers

Arranage masonry tiles from left to right instead of top to bottom

I'm working on a masonry layout for an upcoming project and would like to know if their is a way to arrange the masonry tiles from left to right instead of top to bottom with only CSS. I tried recreating the layout on jsfiddle but the output looks…
clestcruz
  • 1,081
  • 3
  • 31
  • 75
0
votes
1 answer

lazyload & masonry - difference firefox / webkit

am trying to make work masonry & lazyload together, on a responsive website where the bloc for masonry are in %. I have read all the other post on this subject including this particular one : Combining LazyLoad and Jquery Masonry I have apply the…
casp
  • 35
  • 10
0
votes
2 answers

Masonry on Wordpress overlapping other content

I have a client with a WP install and Genesis theme. I am using masonry to tile posts on a specific category. The problem I am having is that there is other content on the page that the masonry overlaps (category description). I have tried…
chris
  • 1,172
  • 12
  • 15
0
votes
0 answers

Masonry and Infinite Scroll images overlap

I'm using Masonry and Infinite Scroll on my site to load in content. However, whenever it gets to the point where Infinite Scroll loads in the new content, the images overlap with each other. I've tried everything I can think of with nothing…
Eric Filkins
  • 329
  • 2
  • 8
  • 23
0
votes
1 answer

Masonry blog layout issues in different browsers

I am a novice at web design and would really appreciate anyone's help! I want my blog archive pages to have kind of a masonry layout. But I want the posts to all be the same size so that it creates a perfect grid. The layout is showing up correctly…
0
votes
1 answer

Masonry Grid-sizer with gutter not aligning correctly on 50% size

I have grid-sizer masonry and a div with of 50%. I have also put a gutter of '10' but it doesn't seem to equalize the boxes accordingly. The red boxes is not align with the whole container. The width of the .w2 red boxes are %49 to make the gutter…
mark-in-motion
  • 263
  • 6
  • 23
0
votes
1 answer

Alignment issues with masonry

I know these masonry questions tend to be very specific and cumbersome. This time I am stuck and can't figure out why the bottom row isn't floated together into one row. What I got without masonry (just float left): What I get with masonry: What I…
Dominik
  • 6,078
  • 8
  • 37
  • 61
0
votes
1 answer

How to arrange the dynamically generated content in two columns with equal height?

Hi the below is the output what I am getting. SPECIALTIES is the heading. Let it be there. I need the content that appeared after the heading SPECIALTIES to be arranged in 2 columns. I have used http://masonry.desandro.com/. As I am developing the…
Abu Isaac
  • 75
  • 2
  • 13
0
votes
2 answers

Resize parent container based on child content

I'm trying to resize a parent containter based on it's content. Currently, it is using percentage for the width. Unfortunately, the image container does not resize based on it's content. Is there a way to resize the child container based on it's…
zan
  • 594
  • 2
  • 8
  • 20
0
votes
1 answer

Load more content with XSLT?

Fairly simple concept. I have a paginated datasource which feeds content to a masonry wall in blocks of 15. I want to stick a 'Load More' button on there. Do I need to load the whole DS and eliminate pagination, then just mask it with jQ? Sounds…
AcidX
  • 17
  • 5
0
votes
1 answer

Jquery responsive Masonry mobile grid layout

I would like to create a paid subscription website in Jquery mobile because I think the site works better with the server then Wordpress. Of course there will be PHP in it for contact page, etc, but I prefer a responsive Jquery site with a Jquery…