砌體JS顯示項目首先在調整大小正確

Question

問題：（所有.items具有絕對和頂部0 =>重疊）

它的第一個節目correcty當我調整窗口大小。

---

的JavaScript（http://masonry.desandro.com/）：

$(document).ready(function() { 
    var container = document.querySelector(\'#container\'); 
    var msnry = new Masonry(container, { 
     itemSelector: \'.item\', 
     columnWidth: container.querySelector(\'.grid-sizer\') 
    }); 
}); 

---

HTML：

<div id="container"> 
    <div class="item"><a><img/></a></div> 
    <div class="item"><a><img/></a></div> 

---

CSS：

#container { 
    background: none; 
    width: 100%; 
} 


#container:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

#container .item img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
} 


@media screen and (max-width: 480px) { 
    #container .item, 
    #container .grid-sizer { 
     width: 49%; 
     margin: 0.5% 0.5% 0 0.5%; 
    } 
} 

@media (min-width: 480px) { 
    #container .item, 
    #container .grid-sizer { 
     width: 32.3%; 
     margin: 0.5% 0.5% 0 0.5%; 
    } 
} 

@media screen and (min-width: 768px) and (min-width: 992px) { 
    #container .item, 
    #container .grid-sizer { 
     width: 24%; 
     margin: 0.5% 0.5% 0 0.5%; 
    } 
} 

@media screen and (min-width: 992px) and (min-width: 1200px) { 
    #container .item, 
    #container .grid-sizer { 
     width: 11.5%; 
     height: auto; 
     margin: 0.5% 0.5% 0 0.5%; 
    } 
} 

非常感謝您！

Answer 1

嘗試尋找有關ResponsiveUI的文章 - 這會給你很多有用的信息。可以用下面的代碼完成「自動縮放」：

.wrapper img { 
width: 100%; 
max-width: 100% 
height: 100%; 
}