砌體平原OL不工作

Question

我正在滾動我自己的無DB數據庫（live here），並且希望使用Masonry來製作沒有大量空白空間的縮略圖（儘管這更像是「灰色空間」在我的網站上）。

我相信我正確地實現它：

var $container=$('#main'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
       itemSelector : '.box', 
       columnWidth: 200 
      }); 
     }); 

也許一個問題是，我使用的是另一段代碼圓縮略圖的邊緣：

$("img.rounded_corners").each(function() { 
      $(this).wrap('<div class="box rounded_corners" />'); 
      var imgSrc = $(this).attr("src"); 
      var imgHeight = $(this).height(); 
      var imgWidth = $(this).width(); 
      $(this).parent() 
       .css("background-image", "url(" + imgSrc + ")") 
       .css("background-repeat","no-repeat") 
       .css("background-color","#fff") 
       .css("height", imgHeight + "px") 
       .css("width", imgWidth + "px"); 
      $(this).remove(); 
     }); 

這基本上用div替換圖像，我已經添加了相應的「框」類。

儘管如此，頁面上的佈局仍然保持不變。出了什麼問題？

謝謝！

Answer 1

現在懂了......我不知道怎麼我以前沒有

看到了這一點這不是砌築/一個錯誤的jQuery版本

腳本這是所有包裝中的圖像.box div在圖像加載到文檔之前運行。所以，沒有選擇任何東西，並且當砌體腳本運行時，沒有類別爲box的元素。

因此，將最後一個腳本到身體

<script type="text/javascript"> 
      Shadowbox.init(); 
      $("img.rounded_corners").each(function() { 
       $(this).wrap('<div class="box rounded_corners" />'); 
       var imgSrc = $(this).attr("src"); 
       var imgHeight = $(this).height(); 
       var imgWidth = $(this).width(); 
       $(this).parent() 
        .css("background-image", "url(" + imgSrc + ")") 
        .css("background-repeat","no-repeat") 
        .css("background-color","#fff") 
        .css("height", imgHeight + "px") 
        .css("width", imgWidth + "px"); 
       $(this).remove(); 
      }); 
      var $container=$('#main'); 
      $container.imagesLoaded(function(){ 
       $container.masonry({ 
        itemSelector : '.box', 
        columnWidth: 200 
       }); 
      }); 
      </script> 
</body> <!-- just above the end of the body. In fact, this is said to be a good practice: leave the external js files in the head, and inline js at the end -->