Масонство JS показывает элементы сначала при правильном изменении размера

Проблема: (Все.items имели абсолютные и верхние 0 => перекрытия)

Его первое шоу корректирует, когда я изменяю размер окна.

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"><code>
 
 
</code> <p> CSS:</p> <pre class="prettyprint linenums">#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%;
 }
}

Большое спасибо!

1 ответ

Попытайтесь найти статьи о ResponsiveUI - это даст вам много полезной информации. "автомасштабирование" может быть выполнено следующим кодом:

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

licensed under cc by-sa 3.0 with attribution.