0

.item-content の背景画像が CSS ファイルに設定されている場合に機能し、応答するパッカリー画像グリッドがあります: 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);


 }

これにより、グリッドではなく左側のページに追加されます。何か案は？

JavaScript を使用して追加した画像ではなく、ハードコードされた DOM 項目を追加した場合をさらに調査すると、グリッドが十分に大きい場合、画像が完全に覆い隠されます。画像が DOM に追加される前に、packery が初期化されていると思われます。

すべての HTML 要素を初期化するまで packery を待機させるにはどうすればよいですか?

4

1 に答える 1

0

問題は、すべての HTML 要素が動的に追加される前に、packery がグリッドを初期化していたことです。解決策は、後で単純に初期化することでした。

于 2015-12-28T04:59:01.943 に答える