Mason.js for creating a perfect grid with jQuery.

When columns is declared, like this:

columns: [
  [0,768,2],
  [768,900,4]
]

I get Uncaught TypeError: Cannot set property '0' of undefined when I'm resizing the window at 768px. line 190:

for (var i = 0; i < a; i++) {
  for (var bh = 0; bh < h; bh++) {
    elements.matrix[t + bh][l] = true;
      for (var bw = 0; bw < w; bw++) {
        elements.matrix[t + bh][l + bw] = true;
      }
  }
}

Hope it helps :+1:

Hello there, I was trying to get you by email but it didn't seem to work out so I'll try through here. I would like to use mason.js for creating a perfect grid of images, my question is, how would i do it and if its even possible with mason.js?

These are the things I need it to do:

1. Create a perfect grid from inputted images of any size and any amount with no gaps at all.
2. In order to fill gaps in, the system can resize the images, however ratio should be kept (In case there will be still gaps, the system can also crop certain images).

What do you think?

Thanks for your help.

I have this issue as well. I see that there are others. I am not using the column parameter, so I can see this can be an issue with the JavaScript's default column parameters.

I use 2 promoted items. One size is 2 x 3 (big) and one size is 1 x 3 (wide). and the ratio is 1.1 (which i assume means 1 height x 1 width, aka Aspect Ratio aka mine would be square)..

Anyway, I am not even sure I wanted to get in to the element.matrix[] stuff at all. But I got an error on this error on line 190 of mason.js.

I use a Jquery .load() ajax to call the next page of a WordPress paginated loop. I use more javascript to form those posts in to the proper html markup as you show in your demo.

I use PHP to randomize the class to add big and wide classes to promote boxes. I thought that was the idea. Otherwise, does this JS add the promoted classes itself? I only made it have like 10% of being class "big" and 15% of being class "wide" and it usually works out that it has 1-2 big and 2-5 wide.. so I assumed everything was working.

Load 1 always works without error. All the time. The randomization works great! I can then use CSS to change the appearance of the promoted posts, so its amazing! Load 2 ALSO WORKS!! As in, I have been successfully about to combine this plugin with a .load() AJAX call of a WordPress paginated loop, and have the size randomize.

Load 1 and load 2 ALWAYS WORK, and I even added loading elements so the loading appearance is okay.. the div that gets clone() (usually the first filler box) now is a loading box. Then I have to use index and eq() to swap out content to get the posts to appear in the correct order. That is working beautifully as well.

The thing is Load 3. If I press the load more button I created twice, I get:

"Uncaught TypeError: Cannot set property '2' of undefined"

I eliminated the change of it being any other error or any other line by using the uncompiled version, and not compiling it myself at all either. I also had spent several hours trouble shooting before I ever got to that point.

I believe it could be a parse issue that is happening. When I read more about element.matrix[] I found that many people needed to parse the variables inside. Also the error itself is saying "Cannot set property of '2' ", 2 being a number not a variable or attribute or property of any kind, it is a number. Right? I am not sure I am not an expert.

localnationalnews.com

I am paying for help on this assignment. I am also needing many other features. But all I want to do is get past this error. I have several other solutions for other features. I guess what I am really saying is I am willing to help and devote resources to making this better.

Hey dude. I'm using this cool plugin but always get this error. My JS:

$('.hub').mason({
    itemSelector: '.tile',
    ratio: 1,
    sizes: [
        [1,1]
    ],
    promoted: [
        [0.5,0.5,'tile140x140'],
        [0.5,1,'tile140x290'],
        [1,0.5,'tile290x140'],
        [1,1,'tile290x290'],
        [2,2,'tile590x590'],
        [2,2.5,'tile590x740']
    ],
    columns: [
        [0,480,1],
        [480,780,2],
        [780,1080,3],
        [1080,1320,4],
        [1320,1680,5]
    ],
    layout: 'fluid',
    gutter: 5
});

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?

Hi there,

just created mason instance with following parameters:

$("#mason-grid").mason({ itemSelector: ".mason-box", ratio: 1.1, sizes: [ [1, 1] ], promoted: [ [1, 3, 'wide'], [3, 1, 'tower'], [2, 3, 'big'], [1, 1, 'default'] ], filler: { itemSelector: '.filler', filler_class: 'custom_filler' }....

ok...if I give some promoted classes I get this error:

TypeError: settings.sizes[s] is undefined error source line: var h = settings.sizes[s][1];

//creality

I was just wondering if anyone has looked at Mason for an infinity scrolling style page.

Is there a recommended way to append content to the main content div without causing everything to redraw?

Thanks,

Jamie

Hi, nice work with Mason.

I'm having a little issue. I think there is appearing a filler that we don't really need..

Check the next jsfiddle: http://jsfiddle.net/fr93465n/2/

If you go to the bottom of the result, you will see a small square (light green) with a filler over it. If we move that square to the place of the filler. We we'll have a perfect grid, so...

How avoid that? I don't really need fillers at this time..

thankyou~

Hi there -

First of all, love the plugin! Thank you.

Although everything still works on the frontend, I am receiving a JS error in my console: "Uncaught TypeError: Cannot set property '4' of undefined"

Seems to be the same as this issue: https://github.com/DrewDahlman/Mason/issues/10

If I use the minified version vs. non minified version I get the same error but instead of property '4', it's property '1'

This error is causing other issues with jQuery plugins, so I'm hoping to get it fixed.

I am using the most recent version of the script here: https://github.com/DrewDahlman/Mason/blob/master/mason.min.js

Thanks in advance!

Added randomSizes and randomFillers options if randomSizes are false then sizes need to be in data-layout attribute as in:

the datalayout corresponds to the size index (can be improved be passing the exact layout in the html

$("#grid").mason({ itemSelector: ".box", ratio: 1.5, sizes: [ [1,1], [1,2], [2,1], [2,2], ], columns: [ [0,480,1], [480,780,2], [780,1080,3],

], filler: { itemSelector: '.fillerBox', filler_class: 'custom_filler' }, randomSizes:false, randomFillers:false,

layout: 'fluid', gutter: 5 },function(){ console.log("COMPLETE!") });

Firstly, awesome work with Mason, it's exactly what I've been looking for.

I've got a relatively large page of items, using a few different sizes and it needs to be fluid. One issue I'm having is that when I don't include a gutter, some of the filler items appear misaligned, either causing small gaps between them, or overlapping one another. It's slight, but noticeable.

It looks like some of the filler item properties are calculated as fractions (e.g. left: 810.68px) so I'm not sure if this has anything to do with it. Any ideas? Thanks!

I'm having a problem with this script. I want to add dinamically new elements to the grid, but then they wont appear, because fillers who have position absolute appear on page in front of them. If i resize everything it works fine. Is there a way to do the same resize does? This way new items can be added dinamically

Hi, thanks for great plugin. Is it possible somehow to force container height to some value, or to define number of rows somehow? I know it is difficult, but I'm just wondering, because with fixed container height there will be less "jumping" of the pagination and the other content bellow the container. Cheers.

Hello, I'm getting the error:

TypeError: a.matrix[(d + o)] is undefined

in console. I noticed it after adding CSS preloading .

Could this have something to do with the error? And why did it occur? Because grid wrapper width and height are unknown at the time masonjs tries to build the grid?

Since your elements matrix is dependent on element calculations, may I suggest to automatically set the container of the elements to relative/absolute and also the item selected to be set as a block. This way here you get proper calculations and the element matrix array won't be dynamically created with improper size.

grid_mason.pdf

Hello Drew Dahlman

I hope you're very well.

Mason seems incredible and I started to study it, I am a graphic design student but I do not understand how to solve a problem with my grid.

It would be amazing if you could help me with this.

I sent you an image with a grid that I have and with a grid that I have to do.

I know very little about Javascript, but I have no idea how to write a code to do disappear the space around my grid and adjust it to body.

Could you help me,

please?

Thanks a lot!!!

Regards

Tânia