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
-1
votes
1 answer

Is there any way to filter all previous elements, by class?

I have a masonry gallery with ul / li elements. To make them responsive I am adding to each 'li' element it's column number as a class, so I can sort them later. I am trying to get previous elements height in column before adding new one. So…
Davit Mkrtchyan
  • 299
  • 2
  • 11
-1
votes
1 answer

Displaying masonry layout in wordpress

How to implement masonry layout for displaying posts in wordpress? I want to display my posts in a masonry grid layout This is the code i have tried in functions.php add_action( 'wp_enqueue_scripts', 'site_scripts' ); function site_scripts()…
savana
  • 3
  • 3
-1
votes
1 answer

Get masonry like layout with Bootstrap 4

I want to create the following layout (see img): The main thing: The blocks will "merge" together as in a masonry layout, without margins below One block double with of the others (or more of that kind of blocks) I tried it in 2 ways: With Cards…
Jelle
  • 19
  • 8
-1
votes
1 answer

Creating Masonry Layout

I am looking to build out a simple version of Masonry layout for an image gallery I am building. I wanted to use flexbox and utilize flex-direction columns and row wrap to create most of the layout. The biggest feature I want to implement is…
James Zilch
  • 585
  • 2
  • 7
  • 16
-1
votes
1 answer

Rails Masonry elements overlapping after an AJAX call

My masonry transitions works well on first load. However, when I make an AJAX call to retrieve new items, the old elements remains the same position, but the new items are aligned vertically from top to bottom. It works well on the first…
tak
  • 59
  • 1
  • 9
-1
votes
1 answer

How to use Masonry grid layout in vuejs2(with bootstrap) without jquery?

I want to display tweets like card-columns in my page. I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly. in main.js import Tweet from 'vue-tweet-embed'; import Masonry from…
Dhruv Goradiya
  • 85
  • 12
-1
votes
1 answer

HTML elements left to right with no gap in 2 columns

I'M working on a page where I'll show news in 2 columns. The elements width will be the same, it should be responsive -goes to 1 column if the viewport is smaller, but I've already know how to do it-. & it is an angular2 project. The problem comes…
Colosh
  • 135
  • 2
  • 11
-1
votes
1 answer

Masonry Plugin don't work on WordPress gallery

Good evening, I am trying to do a masonry gallery like the on on this website: http://bensasso.com/ I have a plugin already developed on this link: http://yourjavascript.com/4620774411/picwall.js To work the structure is:
-1
votes
1 answer

Can I make a CSS-only masonry layout?

First of all: yes this question is similar to Vertical vs. Horizontal Masonry CSS-only But as nobody has yet answered this question, I'm gonna give it another try. I have set up a masonry layout for my WordPress posts using the CSS columns property.…
Rico Ocepek
  • 707
  • 6
  • 18
-1
votes
1 answer

Masonry makes all elements float:0

I have a prestashop store in which I'm using a module I modified that works in another store, but not in the one I'm trying to install it now. Masonry loads fine, but it applies float:0 to all elements, making just one column instead of a mosaic as…
Enzo
  • 103
  • 10
-1
votes
2 answers

How to avoid empty spaces and fill gaps between images

I’m using Masonry + Isotope to order a mosaic of images. I have 3 different image sizes : width:220px; height: 168px; width:220px; height: 336px; width:440px; height: 168px; I thought that with a column width of 440px, it would work very well…
Sébastien Gicquel
  • 3,651
  • 6
  • 43
  • 77
-1
votes
1 answer

Text coming out of paragraph tag?

I'm using masonry layout for my website and I'm generating the boxes from php. whenever i have a lot of text on one of the p tags or the box, the text overflows out of the tag. This is the live site: http://uneraportoj.com/index2.php I tried…
alb tr
  • 51
  • 6
-1
votes
1 answer

how can i disable masonry layout in isotop plugin?

I want just use filtering Option In isotop Plugin . Is it possible to use just filtering Option. the reason is I want to have rtl masonry layout with filtering Option. but isotop dosnt support rtl layout. but the masonry plugin does. I want the…
architesa
  • 79
  • 2
  • 7
-1
votes
3 answers

Placing to List Items side by side in android ListView

i would like to place items with in a listview side by side like masonry view. but i would also like to have a tile that spreads over the two columns. i have found a few projects in git but non have a tile which spreads over the two columns. I have…
Eliahu Horwitz
  • 489
  • 3
  • 17
-1
votes
1 answer

jQuery function shows error

The following shows the this error... TypeError: $container.picsLoaded is not a function How to get around this? $(function(){ var $container = $('.site'); $(window).load(function(){ $container.picsLoaded( function(){ …
Venki
  • 11
  • 4
1 2 3
…
60
61