動態columnWidth時造成的圖像疊砌體

Question

我試圖重新從統一Rails中4 http://htmlstream.com/preview/unify-v1.8/blog_masonry_3col.html

我買的主題，包括我的應用程序中的最新imagesLoaded和砌體文件砌體博客視圖（使用bower-軌）。

• 砌體PACKAGED V3.3.2
• imagesLoaded PACKAGED V3.2.0

當與供給JS文件的所有圖像被堆疊在彼此的頂部上的主題使用。

截圖1

$(document).ready(function(){ 
    var $container = $('.grid-boxes'); 

    var gutter = 30; 
    var min_width = 300; 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector : '.grid-boxes-in', 
      gutterWidth: gutter, 
      isAnimated: true, 
       columnWidth: function(containerWidth) { 
       var box_width = (((containerWidth - 2*gutter)/3) | 0) ; 

       if (box_width < min_width) { 
        box_width = (((containerWidth - gutter)/2) | 0); 
       } 

       if (box_width < min_width) { 
        box_width = containerWidth; 
       } 

       $('.grid-boxes-in').width(box_width); 

       return box_width; 
       } 
     }); 
    }); 
}); 

見這個js小提琴：http://jsfiddle.net/sdynfq83/

我注意到以下幾點：

• 調整窗口大小或刷新不能解決問題，所以我想通了它不是一個圖像加載錯誤。我花了很長時間才弄明白這一點。
• 我的html代碼似乎沒問題，因爲如果我從主題本身複製HTML代碼幷包含相同的JS和CSS文件，我也有同樣的問題。
• 「.grid-boxes-quote」框的寬度與其他網格框的寬度不同。這很奇怪，因爲它們都應該是相同的，因爲所有的盒子都有「.grid-box-in」類。 https://jsfiddle.net/sdynfq83/embedded/result/

當拆除columnWidth時碼和通過一個固定數量的（300）替換它+添加寬度到電網盒式那麼它似乎工作。這不是我想要的，因爲圖像尺寸不再正確。

CSS

.blog_masonry_3col .grid-boxes-in { 
    padding: 0; 
    margin-bottom: 30px; 
    border: solid 1px #eee; 
    /* added width */ 
    width: 300px; 

} 

JS

$(document).ready(function(){ 
    var $container = $('.grid-boxes'); 

    var gutter = 30; 
    var min_width = 300; 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector : '.grid-boxes-in', 
      gutterWidth: gutter, 
      isAnimated: true, 
       /*columnWidth: function(containerWidth) { 
       var box_width = (((containerWidth - 2*gutter)/3) | 0) ; 

       if (box_width < min_width) { 
        box_width = (((containerWidth - gutter)/2) | 0); 
       } 

       if (box_width < min_width) { 
        box_width = containerWidth; 
       } 

       $('.grid-boxes-in').width(box_width); 

       return box_width; 
       }*/ 
      columnWidth: 300 
     }); 
    }); 
}); 

爵士小提琴：http://jsfiddle.net/8c0r06a6/2/

本身提供的磚石舊版本的主題。其中的代碼似乎工作。圖像確實重疊（通過調整窗口大小或刷新窗口，可以修復此罐）。

截圖2 截圖3

但是我想更新到加載，所以我可以繼續使用涼亭輕鬆地更新這些文件磚石和圖像的最新版本。 我也希望使用最新版本的一切修復了截圖2中的重疊圖像。我有一個工作JS小提琴下面的舊代碼。

/** 
* jQuery Masonry v2.1.05 
* A dynamic layout plugin for jQuery 
* The flip-side of CSS Floats 
* http://masonry.desandro.com 
* 
* Licensed under the MIT license. 

http://jsfiddle.net/ytLf3bue/1/

總結我有以下問題，請記住，我是一個開始愛好編碼器承擔，我沒有很多的JS經驗：

1. 它是一個聰明的總是使用最新版本的Masonry和ImagesLoaded代碼的想法，還是應該堅持提供的文件？
2. 如果1.是yes =>我該如何修復代碼，以便圖像不會疊加在eachother上？
3. 如果1.是否=>如何修復代碼，以便截屏2和3中的重疊圖像和背景流血消失了？

Answer 1

David Desandro自己回答了我。

$(document).ready(function() { 
    // init Masonry after all images have loaded 
    var $grid = $('.grid').imagesLoaded(function() { 
    $grid.masonry({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     gutter: 20, 
     columnWidth: '.grid-sizer' 
    }); 
    }); 

}); 

在砌體V3，columnWidth時不再接受功能。相反，使用 元素大小爲響應式佈局。

這裏有一個演示 http://codepen.io/desandro/pen/f3451d70f80c35812b33956785ee152c/

此修復該問題。

Answer 2

任何時候，你正在處理的磚石，而不是使用：

$(document).ready(function(){ ... go masonry ... } 

使用：

$(window).load(function(){ ... go masonry ... } 

http://jsfiddle.net/sdynfq83/2/

$（文件）。就緒，一旦觸發的DOM完全加載。這不包括加載像圖像資源。砌體根據寬度和高度計算圖像的絕對位置。如果它在實際圖像加載之前運行，它會將圖像標記視爲具有零寬度和高度的元素。因爲它只是偏移了之間的排水溝，並且圖像最終疊加。

$（window）.load會在所有頁面資源加載完成後觸發。這允許砌體在試圖放置它們之前獲得所有物體的正確尺寸。