0

我有一个包装图像网格，当在 CSS 文件中设置 .item-content 的背景图像时，它可以工作并且响应：http: //codepen.io/anon/pen/eJdapq

.item-content {
  width:  100%;
  height: 100%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg);
  border: 4px solid #333;
  border-color: hsla(0, 0%, 100%, 0.4);
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

但是，如果我改为删除硬编码的 HTML 元素：

 <div class="packery" id="packery">

 </div>

并尝试在页面加载时通过 javascript/jquery 将这些项目动态添加到网格中：

$(document).ready(function () {

             //this block of code below gets executed for around 25 unique image urls 
            //so eventually 25 images would be added to the grid when the page loads


            var imageSourceUrl = //someURL 
            var listingEntry = document.createElement("div");
            listingEntry.className = "item";

            var image = document.createElement("div");
            image.className = "item-content";
            image.style.backgroundImage = "url(" + imageSourceUrl + ")";
            listingEntry.appendChild(image);

            var grid = document.getElementById("packery");
            grid.appendChild(listingEntry);


 }

这只是将它们添加到左侧的页面而不是网格中。有任何想法吗？

在进一步调查当我添加更多硬编码的 DOM 项而不是通过 javascript 添加的图像时，网格足够大时会完全遮盖图像。我怀疑在将图像添加到dom之前正在初始化packery。

我怎样才能让打包机等到我初始化所有的 HTML 元素？

4

1 回答 1

0

问题是 packery 在我所有的 HTML 元素被动态添加之前初始化网格。解决方案是在之后简单地初始化它。

于 2015-12-28T04:59:01.943 回答