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

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

Useful links

950 questions
6
votes
1 answer

Getting Packery / Masonry to work with angular2

I'm trying to get Packery / Masonry to work on a component. Packery is detecting the container but giving it a height of zero suggesting the content hasn't loaded even though I'm using imagesLoaded. I've tried using various lifecycle hooks but they…
dottodot
  • 1,479
  • 1
  • 16
  • 24
6
votes
1 answer

Masonry vertical fill before horizontal

I'm building a masonry grid which needs to have the following output: But the problem is masonry is going to fill horizontal space first and after that it's going to fill the vertical spacing. So the first part is going good with masonry but the…
user2023106
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,453
  • 4
  • 35
  • 63
5
votes
1 answer

Masonry layout with Next.js

I am developing a multi-page website using Next.js for the frontend and Strapi for the backend. On the blog page, the data is dynamically fetched from the database. I am trying to display this data in an adaptive layout using Masonry. The problem I…
Phil
  • 383
  • 1
  • 4
  • 18
5
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.
席小雨
  • 73
  • 1
  • 3
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
  • 430
  • 2
  • 6
  • 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,978
  • 4
  • 30
  • 47
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
  • 352
  • 5
  • 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
  • 5,599
  • 11
  • 51
  • 104
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
  • 688
  • 3
  • 12
  • 23
4
votes
5 answers

Bootstrap 5 layout for different sizes cards - like Pinterest

I am building a web that would use Bootstrap 5, the web would have a section which displays several cards like this As you can see, each card may have different sizes (Depending on the description and thumbnail) How do I make them compact, as in…
Hari Anugrah
  • 484
  • 1
  • 7
  • 12
4
votes
3 answers

Vue 3 Masonry Layout

Does anyone know of a masonry layout which works with Vue 3 and Server Side rendering? My requirements is that I can not specify the columns up front, I want the masonry layout to work that out. In my Vue 2 application I am using "vue-masonry". I…
se22as
  • 2,282
  • 5
  • 32
  • 54
4
votes
2 answers

How to increment a value on display of v-if?

So to explain why I need to do that : I've got a masonry of photos and I need to add an index to each of those photos. The thing is I can't relie on the index of my v-for because sometimes it is on purpose an "empty case". |---|---|---| | | 2 |…
Baldráni
  • 5,332
  • 7
  • 51
  • 79
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
  • 433
  • 3
  • 21
4
votes
0 answers

Create Masonry image gallery in pdf or print document format

I have a lot of situations where I need to print multiple images on a page. Often time I want to create Masonry like layout but I need to manually resize each image to do this and I feel like it is very inefficient. There are a lot of options to do…
David Jun
  • 111
  • 5
1
2
3
…
63 64