I would like to create a masonry gallery, but have no gaps in between images. I have tried masonry(leaves gaps), isotope(leaves gaps), and packery(seems to do what I want, but leaves staggered images at bottom of layout).
For example,
I want to have a square of images. Lets say 1000x1000. In that I want to have images of all different sizes fit in the layout.
Does anyone know how to do what I am trying to accomplish?
By default, $.masonry() doesn't leave gaps. Remove gaps from your CSS, make sure your image widths match so everything can be flush side by side, and be sure not to specify a gutter or width in your masonry configuration that will create space between elements.
$('.masonry').masonry();img {
max-width: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="masonry">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png">
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg">
<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
<img src="https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg">
<img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg">
<img src="http://www.w3schools.com/w3css/img_forest.jpg">
</div>