Responsive Grid with Object Zoom

Question

I have problems here. I need a flexible image grid that we can enlarge on each image, and all other images should automatically switch to empty spaces.

I came up with a solution that works partially:

$(document).ready(function () { $("#wrapper div").click(function () { if ($(this).siblings().hasClass('expanded')) { $(this).siblings().removeClass('expanded'); } $(this).addClass('expanded'); }); }); 

 .wrapper { width:100%; margin:0 auto; } .wrapper div { width:31%; margin:1%; float:left; -webkit-transition: width 1s; transition: width 1s; } .expanded { width:64% !important; } img { width:100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="wrapper" id="wrapper"> <div> <img src="http://i.imgur.com/m9kLJMi.jpg"> </div> <div> <img src="http://i.imgur.com/1fR1mQQ.jpg"> </div> <div> <img src="http://i.imgur.com/CFf5bbM.jpg"> </div> <div> <img src="http://i.imgur.com/3U2gd7I.jpg"> </div> <div> <img src="http://i.imgur.com/N4pFnCE.jpg"> </div> <div> <img src="http://i.imgur.com/q81AaCs.jpg"> </div> <div> <img src="http://i.imgur.com/wjjhTtW.jpg"> </div> <div> <img src="http://i.imgur.com/9fifhrM.jpg"> </div> <div> <img src="http://i.imgur.com/gz5Qdv6.jpg"> </div> </div> 

But some elements break the grid, only 1, 4 and 7 work correctly. JSFiddle example

I came up with another solution, which is a network plugin . But I can not make it responsive.

Does anyone have a key that I can execute.

thanks

Answer 1

Working with percentages and relative positions is a mess for this example. Check isotope example

http://isotope.metafizzy.co/methods.html#layout

Click on the example on the right. It uses absolute position (and some calculation)