imagesGrid
imagesGrid is a simple and lightweight jquery plugin to create responsive justified images grid.
Your HTML code should look like this:
<div class="images-grid"> <div class="image-wrapper" data-width="500" data-height="450"> <img class="image-thumb" src="500x450.jpg" /> </div> <div class="image-wrapper" data-width="300" data-height="600"> <img class="image-thumb" src="300x600.jpg" /> </div> <div class="image-wrapper" data-width="1024" data-height="768"> <img class="image-thumb" src="1024x768.jpg" /> </div> <div class="image-wrapper" data-width="400" data-height="400"> <img class="image-thumb" src="400x400.jpg" /> </div> <div class="image-wrapper" data-width="350" data-height="700"> <img class="image-thumb" src="350x700.jpg" /> </div> </div>And your CSS should look like this:
.image-thumb { max-width: 100%; }Then you simply have to call the plugin:
$(".images-grid").imagesGrid();Some options are available (with their default values):
$(".images-grid").imagesGrid({ rowHeight: 150, // The minimum height you want each row of the grid to be margin: 1, // The amount of pixels between each images imageSelector: '.image-thumb', // The class name of the images in your grid maxLines: false, // The maximum number of lines to show (false means all lines should be visible) showLastLine: true, // Should the last line be hidden alignLastLine: 'left', // How should the last line be aligned (only if it is visible). Should be set to justify when using maxLines or if showLastLine is false responsive: true // To disable the grid responsivness (default is true) });License MIT.
