search

DrewDahlman / Mason

Mason.js for creating a perfect grid with jQuery.
http://masonjs.com/
MIT License
1.22k stars 184 forks source link

Items repeating unnecessarily #54

Closed jonlambert closed 7 years ago

jonlambert commented 9 years ago

Hi!

This looks like an awesome plugin. I've just cracked it out on an example page, with 4 images as a test. 

$('.images').mason({
  itemSelector: '.image',
  ratio: 1.0,
  sizes: [
    [1, 1]
  ],
  layout: 'fluid'
});

I'd like them all to render with an equal size, and distribute evenly to fill the container. This the plugin does brilliantly. However, it doesn't just fill one line, it creates a 4x4 grid of images (obviously repeating each image 4 times) meaning the container is 4x the height it should be. I'm sure it's down to user error, but is there any way of disabling the repetition, and limiting the height of the container?

ghost commented 9 years ago

The same for me too. This just took my time to figure out. Shame no answer given.

kayaj commented 8 years ago

+1 I'm just looking into the code, maybe we can solve this ourselves. Maybe @DrewDahlman will deliver. (Basically another option "entirely:true/false" would be interesting. as in "only fill if really necessary".)

DrewDahlman commented 8 years ago

Can you post a fiddle?

kayaj commented 8 years ago

I'm supplying 8 items in a grid with 4 columns. I'd expect MasonJS to arrange all the items in a 2x4 grid without fillers.

-> https://jsfiddle.net/ufvee0v3/

DrewDahlman commented 8 years ago

Ahh looks like there is a calculation issue - if you remove the borders it works as it should.. https://jsfiddle.net/ufvee0v3/4/ I will take a look at how sizing is being calculated to include better for borders.

kayaj commented 8 years ago

You're right @DrewDahlman - The code is pretty sensitive when it comes to widths. ;) Still: Is there no option to skip fillers and use items instead? I want to prevent duplicate content.

julien-gargot commented 8 years ago

If you do not want fillers, I put a comment there about that : #60 https://jsfiddle.net/ufvee0v3/7/

kokujin commented 7 years ago

I was just going to create an issue on this. Is there now a documented way to make the images and their grids more predictable? I have the problem too that several tiles are repeating unnecessarily

DrewDahlman commented 7 years ago

@kokujin look at the promoted feature, you can assign classes and specify the dimensions of your elements based on a class and assigned sizing.