對我的代碼使用砌體JS

我試過應用砌體http://masonry.desandro.com/ JS使圖像浮動在對方下，但它似乎並沒有工作。對我的代碼使用砌體JS

我已經使用了以下功能 - 我做了什麼錯了？ CSS問題可能？

<script> 
    $(function(){ 

    $('.cycler-wrap').masonry({ 
     itemSelector: '.cycler-container', 
     columnWidth: 100 
    }); 

    }); 
</script>

根據以下Kelvin的迴應更新了網站。現在只需一個週期的問題:(

來源

2012-11-08 Dave

這裏的問題是你的.cycle-container元素都是0的像素高，因爲你的img元素絕對定位，這需要他們出文檔的流程。

如果你讓你的.cycler img元素position:relative相反，磚石應該按預期工作由於您的圖片display:inline，保持循環儀工作，你其實只需要進行第一圖像position:relative：

.cycler img{ 
    position: absolute; 
    top:0; 
    left:0; 
} 

.cycler img:first-child{ 
    position:relative; 
}

當然，並不是所有的瀏覽器都支持:first-child，所以最好將.first類添加到每個組的第一個圖像中，並將其用作選擇器。

來源

2012-11-08 03:27:47 Kelvin

謝謝開爾文。由於cycler，'.cycler img'元素必須是'position：absolute'。如果我將它設置爲相對，則圖像中的淡入會混亂。 – Dave

Kelvin有什麼其他想法？或者我應該在jsFiddle上拋出一個版本？ – Dave

得到了你 - 看起來你必須設置每個'.cycler'元素的高度，然後，給他們添加'style =「height：123px」'。如果這不是一個選項，最後一個選項可能是複製每個循環組中的一個'img'，但給它一個類，它將被從循環代碼中排除，並給它「可見性：隱藏「，這將使其看不見，但仍然佔用dom中的空間。凌亂，但它會工作... – Kelvin

對我的代碼使用砌體JS

回答

相關問題