Lưới đáp ứng có thu phóng trên các mặt hàng

Question

Tôi gặp sự cố havin ở đây. Tôi cần một lưới hình ảnh đáp ứng mà chúng tôi có thể thu phóng trên mỗi hình ảnh và tất cả các hình ảnh khác sẽ sắp xếp lại automaticaly trên không gian trống.

Tôi đã đi đến một giải pháp công trình Mà partialy:

$(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>

Nhưng một số mặt hàng phá lưới, chỉ có 1, 4 và 7 làm việc đúng cách. JSFiddle example

Tôi đã đến một giải pháp khác là gridly plugin. Nhưng tôi không thể làm cho nó đáp ứng.

Có ai có đầu mối mà tôi có thể theo dõi hay không.

Cảm ơn

Answer 1

Làm việc với tỷ lệ phần trăm và vị trí tương đối là một mớ hỗn độn cho ví dụ này. Kiểm tra đồng vị dụ

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

Bấm vào ví dụ bên phải. Nó sử dụng vị trí tuyệt đối (và một số tính toán)