複数列のレイアウトでブレークするJavaScript

Question

固定高さの要素に複数列のCSSレイアウトを使用しているため、ブラウザはコンテンツを格納するのに必要な数の列を作成します。新しい列は常に他の列の右側に表示されますが、3列後に折れて、1,2,3の下に列4,5,6が表示されます。私はこれが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％または相対位置を与えます。