自舉元素上的砌體被撞到新排

元素的性質是每個人在應用砌體之前都會在高度上有所不同（由於圖像和標題）並且其高度是未知的。雖然每個元素的寬度用.col-lg-3固定。自舉元素上的砌體被撞到新排

在渲染後的頁面上，每行有4個元素，5元素獨立顯示在一行上，6,7,8被下推到第3行。

HTML代碼

<div class="section-details"> 
    <div class="container"> 
    <div class=""> 
     <div class="masonry" id="elements" data-reference="0"> 
     <!-- elements will be pulled over dynamically --> 
     </div> 
    </div> 
    </div> 
</div>

和每個新的元素的含量被包裹在像下面

<div class="col-lg-3 element"> 
</div>

CSS .element { 填充：10px的10px的0像素; }

JavaScript代碼

// layout the elements 
var layout = function(elements, $container, selector) { 
    $container.imagesLoaded(function() { 
    $container.masonry({ 
     itemSelector: selector, 
     columnWidth: selector, 
     isAnimated: true, 
     animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
     } 
    }).append(elements).masonry('appended', elements, true); 
    }); 
};

和它有所謂以下列方式

layout(elements, $('#elements'), '.element');

所以什麼事情都可能出問題嗎？

來源

2014-10-20 bcbishop

爲什麼'itemSelector，columnWidth'都是「選擇器」？ – Macsupport 2014-10-20 23:25:10

好，我在調試問題時添加了這行，忘記刪除它。刪除該選項後，它仍然是相同的行爲:( – bcbishop 2014-10-20 23:55:12

jsfiddle或鏈接將幫助 – Macsupport 2014-10-20 23:57:43

調試到石匠源代碼，並找出原因，這是如何準備重要的元素 - 推到元素數組的每個元素應該是一個HTMLElement。一旦我解決了問題，問題就消失了。

來源

2014-10-21 17:32:53 bcbishop

自舉元素上的砌體被撞到新排

回答

相關問題