imagesLoaded方法不適用於JQuery砌體

當我首先加載頁面時：不顯示任何圖片。當我加載頁面第二/第三/等...：所有圖片顯示。imagesLoaded方法不適用於JQuery砌體

我該怎麼做？

<br style="clear:left;"> 
<div style="padding-top:48px; padding-bottom:48px; background-color: #1D1626;"> 
    <div id="gallery-container" style="width:828px; margin-left:auto; margin-right:auto;"> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg"> 
       <img src="/gallery/tgn/example/56-teszt-1.jpg" alt="" name="#capty-id-56" class="gallery-picture"> 
      </a> 
      <div id="capty-id-56">Teszt1</div> 
     </div> 
     <div class="gallery-item row1"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg"> 
       <img src="/gallery/tgbs/example/55-teszt-2.jpg" alt="" name="#capty-id-55" class="gallery-picture"> 
      </a> 
      <div id="capty-id-55">Teszt2</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="/gallery/tgn/example/54-teszt-3.jpg" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div> 
    </div> 
</div> 
<script> 
    $(function() { 
     var $container = $('#gallery-container'); 
     $container.imagesLoaded(function() { 
      $container.masonry({ 
       itemSelector : '.gallery-item', 
       columnWidth : 276 
      }); 
     }); 
    }); 
</script>

http://masonry.desandro.com/demos/images.html#content

mansonry plugin

imagesloaded plugin

MyTest的頁面：http://mansonry-imagesloaded-test.darkrpg.hu/

來源

2013-05-06 Zimányi Gábor

你可以請你展示你的代碼如何調用JavaScript？ – Roopendra 2013-05-06 18:34:45

你鏈接到'imagesLoaded'和'masonry'插件了嗎？ – Blazemonger 2013-05-06 18:48:27

我鏈接了插件。 – 2013-05-07 06:51:18

工作對我來說看到的jsfiddle http://jsfiddle.net/zYqht/

<div style="background-color:#ee6;"> 
    <div id="gallery-container"> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg"> 
       <img src="http://lorempixel.com/226/188/?227" alt="" name="#capty-id-56" class="gallery-picture"> 
      </a> 
      <div id="capty-id-56">Teszt1</div> 
     </div> 
     <div class="gallery-item row1"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg"> 
       <img src="http://lorempixel.com/400/188/?217" alt="" name="#capty-id-55" class="gallery-picture"> 
      </a> 
      <div id="capty-id-55">Teszt2</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="http://lorempixel.com/226/100/?222" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="http://lorempixel.com/123/188/?222" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="http://lorempixel.com/226/321/?222" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div> 
     <div class="gallery-item"> 
      <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg"> 
       <img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture"> 
      </a> 
      <div id="capty-id-54">Teszt3</div> 
     </div>  
    </div> 
</div> 
<script> 
    $(function() { 
     var $container = $('#gallery-container'); 
     $container.imagesLoaded(function() { 
      $container.masonry({ 
       itemSelector : '.gallery-item', 
      }); 
     }); 
    }); 
</script>

來源

2013-07-24 18:27:52 Sendy

imagesLoaded方法不適用於JQuery砌體

回答

相關問題