用於多列布局中斷的JavaScript

Question

我在固定高度元素中使用多列CSS佈局，因此瀏覽器會創建儘可能多的列以包含內容。新列將始終顯示在其他列的右側，但是我想在三列之後打破並且列4,5,6列出現在1,2,3以下。我想這可以用JS完成，但我不知道該選什麼。

.columns { 
    width: 360px; 
    font-size: 100%; 
    text-align: justify; 
    height: 300px; 
    display: block; 
    padding-bottom: 30px; 
     -moz-column-gap: 20px; 
    -webkit-column-gap: 20px; 
     -moz-column-width: 100px; 
    -webkit-column-width: 1000px; 
     -moz-column-gap: 40px; 
    -webkit-column-gap: 40px; 
} 

<div class="columns"><p>Lorem ipsum.../p></div> 

Answer 1

你可以把你的圓柱元素與你所需要的寬度和溢出容器：隱藏。然後使用JavaScript克隆柱狀元素，將克隆放入容器中（直接放在原始容器之後），並給克隆留有餘量：-100％或相對定位。