Chrome中的高度問題與jQuery的同位素響應佈局與Bootstrap 3

我使用Isotope插件來過濾我的產品列表。我也使用Bootstrap 3作爲總體佈局，頁面應該是響應式的，所以列寬是基於百分比的。我想要等高的縮略圖圖像和相等的寬度，一個簡單的網格。首先，我嘗試了「fitRows」佈局模式，但是我遇到了錯誤的列數顯示問題（在所有瀏覽器中），並發現Cubica在https://github.com/cubica/isotope-sloppy-masonry發佈的額外佈局行爲「Sloppy Masonry」 - 這樣可以解決列寬問題一個響應式網格。爲了解決相同的高度，我做了一個簡單的JS來設置所有高度以適應最高的項目。Chrome中的高度問題與jQuery的同位素響應佈局與Bootstrap 3

我的問題：在Chrome中，存在縮略圖高度出錯，太小而內容被切斷的問題。（請注意，問題是我的resizeboxes()函數沒有注意到。）

（非）有趣的事情是它不會每次都發生。另外，當我調整Chrome窗口的大小時，佈局正確...

我讀到Isotope v2（現在測試版）會更好地處理響應式佈局，但我無法讓它工作得更好。現在我已經嘗試了很多不同的技巧，但是我無法按照自己的想法得到它。目前的代碼適用於除Chrome之外的所有主流瀏覽器...幫助表示讚賞！

這是我目前（略簡體）代碼：

<div class="row" id="listing"> 
    <?php foreach ($products as $p): ?> 
    <div class="col-md-3 list"> 
     <img src="<?=$p->image_file?>" class="img-responsive" /> 
     <h4><?=$p->title?></h4> 
    </div> 
    <?php endforeach; ?> 
</div>

JS功能，使高度相等的：

function resizeBoxes() 
{ 
    var h = 0; 
    $('div.view').each(function() 
    { 
     var b = $(this); 
     if (h < b.height()) h = b.height(); 
    });  
    $('div.view').height(h); 
}

和init同位素功能：

var $container = $('#listing'); 
function initIsotope() 
{ 
    $container.isotope({ 
      layoutMode: 'sloppyMasonry', 
    }); 
} 

$(window).resize(function() { 
    resizeBoxes(); 
    initIsotope(); 
}); 
$(document).ready(function() { 
    resizeBoxes(); 
    initIsotope(); 
});

來源

2014-01-16 jtheman

即使我之前閱讀這篇文章，答案可以在這裏找到：Can't get Isotope working with Bootstrap 3 .thumbnail

問題是未加載的圖像時，由於響應圖像不能具有寬度/高度值來設定，無論是同位素也不我的高度相等函數可以正確設定圖像高度。因此，解決方案很簡單，只設置同位素在負載上init來：

$(window).load(function() { 
    resizeBoxes(); 
    initIsotope(); 
    $('#listing').animate({opacity: 1.0}, 200); 
});

我加了淡入，以避免閃爍載荷已經完成了。

來源

2014-01-16 21:46:59 jtheman

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

var myGrid = $('.grid'); 

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

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

來源

2014-10-28 23:52:37 silk

Chrome中的高度問題與jQuery的同位素響應佈局與Bootstrap 3

回答

相關問題