無法使用Bootstrap 3獲得同位素工作。縮略圖

遵循幾個S.O.的建議。成員，我決定嘗試在網頁上使用Jquery Isotope。我也使用Bootstrap 3，並且一直難以獲得縮略圖庫（具有不同尺寸的風景/人像定位圖像），看起來不錯。無法使用Bootstrap 3獲得同位素工作。縮略圖

我使用Bootstrap 3 .thumbnail類來調整圖像大小以適應響應列。一切工作很好，直到我將同位素應用於這些縮略圖div。我真的不知道發生了什麼事，但我已經花了幾天時間去了解所有事情（不要笑），無法弄清楚，我正在失去理智等等。我希望這很簡單，我錯過了，因爲我看到的bootply.com，似乎工作的例子

這是發生了什麼（不知道我是否已經看到任何與引導3，雖然。）：

Isotope cropping the divs

這裏是我一直在測試的頁面的鏈接：http://www.chrissvensson.info/projects/025

這是我正在使用的代碼的主要部分。

<div class="container iso"> 
<div class="row"> 
    <div class="item col-xs-12 col-sm-4 col-md-3"> 
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a> 
</div><!--thumbnail div--> 
    <?php endforeach ?> 
<?php endif ?> 
</div><!--row-->

這裏的同位素腳本：

$('.iso').isotope({ 
// options 
itemSelector: '.item', 
layoutMode: 'masonry' 
});

我在這的jsfiddle一直在測試的東西：http://jsfiddle.net/52VtD/345/

鏈接到自舉3 CSS和有我的自定義CSS在那裏。出於某種原因，它似乎在小提琴中工作正常（除了它將底部圖像切掉），但在我的網站上看起來完全不同。正如你將會看到的，這就像它不會計算divs的垂直高度，只是裁剪它們並將它們堆疊在一起。

數點：

我敢肯定它具有與引導3的.thumbnail類的東西做的。當我從鏈接中刪除該類時，事情似乎可以正常工作（除了圖像不縮放到列，我想要的）
這是瘋狂的部分：幾次我點擊了另一個選項卡，或在訪問另一個窗口和所有可能的工作之後回到我的網站。我發誓我親眼目睹了這一點，但我可能會產生幻覺。不知道這是否意味着它的工作非常，非常，非常慢或什麼，但？

如果您可以提供任何建議，我會非常，非常感謝！提前謝謝你。

來源

2013-10-24 ornmnt

可能是因爲當您調用'同位素（）'時圖像未加載，因此引擎不知道每個項目有多少高度。嘗試在頁面加載完成後調用它，或者在圖像標籤中放置'width'和'height'屬性。 – ahren

雖然，現在我看到你有寬度/高度屬性。你確定這些輸出正確嗎？ – ahren

感謝您的評論@ahren。我很確定寬度/高度屬性輸出正確，但是，再次，我認爲Bootstrap的.thumbnail類調整它們以適合列。不知道這是否會影響同位素。 – ornmnt

您需要添加imagesLoaded事件偵聽器。

$('.container').imagesLoaded(function(){ 
    $('.container').isotope({...}); 
});

來源

2014-02-19 16:05:17 Jesse

注：
1.you應該叫windwo負荷事件中異頂部功能（它會等待加載資源），也可以調用函數頁腳。

2.確認函數在css加載後調用。

$(window).load(function(){ 
    $('.iso').isotope({ 
    // options 
    itemSelector: '.item', 
    layoutMode: 'masonry' 
    }); 
    });

來源

2014-05-31 08:26:07

的imagesLoaded插件應該完全正常工作（即使它已經從同位素V2刪除），我個人已經解決了這樣的：

var myGrid = $('.grid'); 

myGrid.imagesLoaded(function(){ 
    myGrid.isotope(); 
});

但我也很喜歡這個插件是如何解決這個問題內部：http://goo.gl/sQ6yXj它使用同位素v2，這是非常可怕的

來源

2014-10-28 23:51:41 silk

無法使用Bootstrap 3獲得同位素工作。縮略圖

回答

相關問題