javascript - Masonry JS 在正确调整大小时首先显示元素

Question

问题:(所有 .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">
  <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%;
}