2016-03-07 53 views
0

,所以我必須開始一個簡單的磚石版本,以顯示我的圖片,但它不是相當流淌我所預期的方式。JQuery的砌體圖像不正確堆疊

這是怎麼了初始化磚石與imagesLoaded插件。

var $container = $('.grid'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.grid-item', 
     columnWidth: '.grid-item' 
    }); 
}); 

但是,正如您從下圖所看到的,圖像顯示在右側而不是左側。

每個.grid-item具有浮子或留在其堆疊的物品到左側。什麼會導致這種行爲?

enter image description here

+0

是不是左畫面(與表和/或所述住宅)的高度比其他圖像較大的一個像素? – Roy

+0

我相信它是2像素,但它不可能使它堆疊在左邊而不是在右邊? – mdixon18

+0

它是否必須通過砌體插件? – Roy

回答

0

嘗試去除圖像

+0

解釋你的答案一點。 – Saif

0

float:left;後加入direction: ltr;到div容器是否有您所使用花車離開砌體理由嗎?從我的經驗來看,這可能會導致佈局問題,插件的全部目的是爲您處理佈局。

如果你想在完美的網格圖案堆棧你可能需要指定的高度和寬度的精確值,因爲即使1個像素可導致砌體堆疊到右邊,因爲這是它的設計做。

有了具體的尺寸很細,如果你的照片是相同的縱橫比,但正如你所說,你有縱向和橫向(超寬?)照片。因此,一個人像照片,你可以有:

<div class="grid-item v2"></div> 
.grid-item { height: 100px; } 
.grid-item .v2 { height: 200px } 

隨着天溝指定您可能需要排水溝值添加到.v2以高度進行補償。