Avoid same blocks

[reardestani]

Hi,

Thanks for your plugin.

I have 9 div with box class in my html. I want only these 9 boxes fill the gaps with each other not new added boxes. At the moment for 9 box html, about 15 boxes will be show on the page.

Is there any solution for that?

jQuery("#grid").mason({
    itemSelector: ".box",
    ratio: 1,
    sizes: [
      [1,1],
      [1,2],
      [2,2],
    ],
    columns: [
      [0,480,1],
      [480,780,2],
      [780,1080,3],
      [1080,1320,4],
      [1320,1680,5]
    ],
    layout: 'fluid',
    gutter: 10
  });

[DrewDahlman]

So because of the way Mason is built it needs some elements to use as fillers. Mason defaults to reusing elements if filler elements aren't specified. Check out the examples with the filler elements.

[reardestani]

I know about filters. Because I am going to generate box dynamically with php, it will be difficult to generate filter boxes.

Is there any formula for calculating the number of needed filters, for example, for 20 boxes?

[DrewDahlman]

What I would say - and this is very dependent on how you're implementing, but what I've done in the past is to create a loop in PHP that has some content from your main loop. This content shouldn't be your primary content, but more of side content. 20 will be more than enough. Also setting some promoted elements may help with formatting your grid.

I used this once in a wordpress site and wound up creating a secondary category to pull from for my fillers.

Another project I was able to use colored boxes that held an icon, or text. This again works perfectly, but it depends on how you're setting your project up and how you want to display items....

[reardestani]

Ok, Thanks.