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
-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

Deploy masonry in Heroku

Good day, I made an app with masonry and js.coffee to make something like "pins" in my app, but when I deploy to Heroku don't work like suppose to do. This is my gem file source 'https://rubygems.org' ruby '2.1.4' gem 'binding_of_caller' gem…
IDGM5
  • 159
  • 1
  • 1
  • 9
-1
votes
3 answers

How to create a perfect image grid with the same row height and variable widths and keeping the columns in a straight line?

Im using Masanory to set an image grid. All my images have equal height but different widths. I need it to look like this : http://www.dreamstime.com/new-stock-photos-images . In there all the images have the same height and different widths but the…
THpubs
  • 6,509
  • 12
  • 52
  • 120
-1
votes
1 answer

Masonry issue columns

I want to redesign my website by adding a new type of gallery (in a few words, it's about masonry). In my view, I want a full page width with a few columns for images. The problem is next, with this code, I only have 2 columns; in fact, inside of…
Alex
  • 35
  • 5
-1
votes
1 answer

Programatically disable Lazy Loading or infinite scroll with jQuery in Pinterest?

NOTE: New to this forum (UX/User Experience), so please let me know if this would be better in a different category. I searched Stack Exchange for "pinterest" and this forum seemed to have the most results. Thanks! Hi guys. I'm writing a jQuery gist…
Eric Hepperle - CodeSlayer2010
  • 3,125
  • 7
  • 33
  • 47
-1
votes
2 answers

jQuery conflict between a lightbox function and masonry/endless scroll

I wanted to create a lightbox effect for images when clicked, so eventually I found this tutorial and followed all the necessary steps to insert it into my page (with a little modification). The lightbox functions exactly the way I want it to, but…
S G
  • 1
-1
votes
2 answers

Div width not resizing for dynamic content

I am having trouble with the width of a div not resizing when it's dynamic content is loaded. As you can see in this screenshot, that the first few divs do not get the width of it's dynamically loaded child images. But as you can see, the later…
Tithos
  • 1,019
  • 3
  • 14
  • 33
-1
votes
2 answers

Masonry not stacking correctly

I'm using masonry.js to achieve the masonry effect on my site. However I'm having difficulty getting the images to stack in the proper places to have a gapless layout. I've made sure all the images are cropped to the right sizes so they will fit…
znels
  • 53
  • 1
  • 6
-1
votes
1 answer

Masonry - How to shuffle items

I'm using the masonry script for one of my webpages. This is the JS (using jQuery, Typescript and the ImagesLoaded Plugin): $(function(){ // or with jQuery var $container; function triggerMasonry() { // don't proceed if…
Marek123
  • 1,159
  • 6
  • 34
  • 68
-1
votes
1 answer

Using jquery append with masonry

i am using this: $('#loadmore').click(function() { $.ajax({ url: 'includes/loadmorebuilds.php', success: function(html) { $("#content").append(html); } }); }); To load more items into a container which is sorted with jquery masonry.…
craig
  • 111
  • 1
  • 3
  • 11
-1
votes
2 answers

Animating jQuery Masonry elements one axis at a time

I have a jQuery Masonry layout that I am initialising like so: $("#container").masonry({ itemSelector: ".pod, .smallpod", animationOptions: { queue: true } }); I thought that the queue option would queue the animation so that it…
Barrie Reader
  • 10,474
  • 11
  • 67
  • 132
-1
votes
2 answers

How to trigger Masonry when a category gets clicked on?

I am using the wonderful masonry cascading grid layout library to display a number of projects on my website. This is my javascript: var container = document.querySelector('#projects'); var msnry = new Masonry( container, { // options …
Tintin81
  • 8,860
  • 17
  • 66
  • 143
-1
votes
1 answer

Can jquery Masonry be added to a drupal theme without Masonry modules?

Is there a way to add Masonry jquery to my drupal theme without Masonry modules?Just to add it to the theme files.I'm using lexi responsive theme.I think I must upload masonry.pkgd.min.js to the already existing js folder , add scripts[] =…
Presley P
  • 11
  • 1
-1
votes
1 answer

jQuery Masonry IsAnimatedFromBottom in Wordpress

I am in the process of making a wordpress theme that uses jquery-masonry, but for the life of me I can't figure out how to use the append method with isAnimatedFromBottom. Below is the code I am currently using. I am trying to get this to work with…
John Quinones
  • 79
  • 1
  • 2
  • 4
-1
votes
1 answer

trying to avoid horizontal scrolling using jquery/masonry

This is my first post here :) I'm very new to web development, I actually didn't really know anything just some days ago when I decided to start building a new website for my band. So please don't blame me if the code isn't the best, for now I want…
Army
  • 1
1 2 3
…
82
83