Stack Overflow
Stack Overflow

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 can work alongside.

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

Useful Links

914 questions
6
votes
3 answers

Masonry Events: Call event after imagesLoaded and layoutComplete

So here's what I'm trying to do. I have a grid with a lot of images, so I'm using the imagesLoaded library along with masonry. Here's my CSS: .grid { opacity:0; } And HTML:
Corey
  • 2,163
  • 4
  • 30
  • 56
6
votes
9 answers

Responsive Masonry layout without predefined widths

I'm creating a 2 column masonry layout using images of different sizes. The images can be any size as long as they have the greatest common divisor (as required by the Masonry plugin). In order to make the layout responsive I'm converting the width…
CyberJunkie
  • 18,604
  • 50
  • 135
  • 207
5
votes
1 answer

Is it possible to arrange Shiny app cards in a masonry grid?

I am currently trying to create a "wall" of cards from a dataframe for a hobby Shiny app. Adapting from this SO answer, here is a minimal complete example of my code: library(shiny) df <-…
DMNO
  • 53
  • 4
5
votes
1 answer

Implementing Angular Masonry for Videos instead of images

I have to use angular masonry grid styles for videos instead of images, I referred most of the angular masonry docs and all I could find is it of using for images.I replaced the img tag and used video tag but still it doesn't seems working.Can…
safeer
  • 129
  • 6
5
votes
3 answers

Pinterest Style Layout with CSS, but stacked horizontally instead of vertically

I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically. See the fiddle here , https://jsfiddle.net/2otpzbgt/1/ column-count: 3; is what I've used and the cards are…
melvindidit
  • 410
  • 2
  • 5
  • 15
5
votes
2 answers

Push down bottom div when slideDown with multiple columns and rows

I have multiple items organized in multiple columns and rows
...
I'm using jQuery…
kurtko
  • 1,306
  • 3
  • 18
  • 41
5
votes
2 answers

Create a masonry-like md-grid-list with angular material

I am trying to implement the md-grid-list in a masonry style but I seem to be stuck with having to decide on how many rows I want the display to stretch. I want to display various images that have different ratio (think pinterest) so that ratio of…
Matthieu
  • 337
  • 4
  • 17
5
votes
4 answers

jQuery masonry layout complete event not working

I have followed the documentation exactly and the layout complete event isn't working. Example can be seen here: http://jsfiddle.net/9464buy5/
…
geoffs3310
  • 4,892
  • 8
  • 41
  • 93
5
votes
2 answers

AngularJS Masonry for Dynamically changing heights

I have divs that expand and contract when clicked on. The Masonry library has worked great for initializing the page. The problem I am experiencing is that with the absolute positioning in place from Masonry and the directive below, when divs…
Yahiko Kikikoto
  • 638
  • 3
  • 12
  • 23
4
votes
3 answers

Masonry Grid overlapping footer content

I have used masonry layout in grid class and grid-items are the column. I am loading masonry on load event like below $(window).load(function () { $('.grid').masonry({ // options itemSelector: '.grid-item', horizontalOrder: true, …
Ajarudin Gunga
  • 353
  • 1
  • 18
4
votes
0 answers

Centered masonry layout with percentage widths

I am trying to implement masonry to my website. What I am aiming for is for a grid which is centered in the page. This is easy just by applying a margin:0 auto; property. I then want the items inside to be both responsive (so a percentage width)…
Daniel Antón García
  • 183
  • 7
4
votes
1 answer

Bootstrap grid with collapsed container in between

It's my very first question here and i hope you can help me. I'm trying to set up a product-overview page with the bootstrap grid. I have got 4 products in a row for large screen sizes. For smaller screen sizes i'd like to have 2 products per…
Thomas B.
  • 41
  • 1
  • 4
4
votes
2 answers

Masonry grid using flexbox

I need a masonry grid like this: Is this possibile to achieve that using flexbox only? Or any other way? Don't want to use Masonry library or other library or framework.
Kaysh
  • 83
  • 1
  • 7
4
votes
3 answers

how to use masonry in swift 3.0

Objective-C [textView mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.mas_equalTo(UIEdgeInsetsZero).priorityLow(); make.top.mas_equalTo(imageView.mas_bottom).offset(20); }]; I want change swift code. please help me?? thanks.
席小雨
  • 63
  • 3
4
votes
1 answer

How to insert each image of gallery in certain div? Wordpress

I'm trying to reproduce this Masonry to show a gallery. I created a CPT for this. "CPT - Gallery". First, I thought of creating a Custom Post Type to publish all images together. MY CPT: --->>> title <<<--- --->>> image default - thumbnail <<<---…
Zkk
  • 691
  • 8
  • 22
1
2
3
…
60 61