search

DrewDahlman / Mason

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

Example with multiple images? #69

Closed kokujin closed 7 years ago

kokujin commented 7 years ago

Can someone point me to an example usage with images? Thanks

DrewDahlman commented 7 years ago

http://codepen.io/DrewDahlman/pen/d3b564d8fb96b147cbf62a29c4c0e7e6/ here's a qick pen that shows how to work with images. set them as background images.

kokujin commented 7 years ago

That was quick, are you "the flash"? Awesome. Thanks

DrewDahlman commented 7 years ago

wink

kokujin commented 7 years ago

:) One last thing though, how do I stop the images from repeating? I only have tests 4 images and it generates over 20.

DrewDahlman commented 7 years ago

So it all depends on how you set things up - in a scenario of 4 maybe set 2 as your primary blocks and then set the other two as your fillers. If you don't specify filler blocks it will reuse random blocks.

I would suggest also playing with your block sizes, 4 is a pretty low number so it's going attempt to fill the space using the base block size, so if you make them larger using promoted and set the grid size. you should be able to configure it to meet your needs.

Mess around with columns, ratio and sizes as well as promoted if you want to force a block to a specific size. You can fill an area exactly how you want but you need to play with settings to get that to work properly.

kokujin commented 7 years ago

Thanks. I'll try that out