I use the Isotope plugin, but still, this is not what is needed.
It is necessary to automatically arrange the pictures in a block at random.
The width and height of the block should be selected based on the size of the pictures inside it.

I also tried masonry and shuffle, but there it’s the same: either the height needs to be set, or the width. It turns out that either the columns are the same in width, or the rows are the same in height.

Example of desired behavior:

enter image description here

How to automatically arrange images in Isotope, without specifying the size of the parent unit?

  • You need to look towards the masonry grid - Kirya
  • I watched both masonry and isotop and shuffle, but they didn’t come up .. they needed to be either set height or width was specified - Vanya Nizamov

1 answer 1

Find a plugin and see a couple of examples here .

$(function() { var $container = $('#am-container'), $imgs = $container.find('img').hide(), totalImgs = $imgs.length, cnt = 0; $imgs.each(function(i) { var $img = $(this); $('<img/>').load(function() { ++cnt; if (cnt === totalImgs) { $imgs.show(); $container.montage({ liquid: false, fillLastRow: true }); } }).attr('src', $img.attr('src')); }); }); 
 .am-wrapper { float: left; position: relative; overflow: hidden; } .am-wrapper img { position: absolute; outline: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="http://tympanus.net/Development/AutomaticImageMontage/js/jquery.montage.min.js"></script> <div class="am-container" id="am-container"> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/1.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/2.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/3.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/4.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/5.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/6.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/7.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/8.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/9.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/10.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/11.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/12.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/13.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/14.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/15.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/16.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/17.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/18.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/19.jpg"></img> </a> <a href="#"><img src="http://tympanus.net/Development/AutomaticImageMontage/images/20.jpg"></img> </a> </div>

  • I watched this example, it does not fit, the height of the pictures is the same there - Vanya Nizamov