javascript - Javascriptでcss3の複数列数を取得する方法

Question

新しいcss3複数列レイアウトプロパティを使用して、テキストを新聞の列に配置しています。各列の幅は固定されており、列数のデフォルトは「自動」です。これは、ブラウザが列の数を決定することを意味します。

Javascriptで実際の列数を整数として取得するにはどうすればよいですか？

cssの「column-count」（または-moz-column-count）を照会すると、結果として「auto」または空白が返されます。

Answer 1

秘訣は、コンテンツの最後に小さなマーカーを付けることです。プログラムで空のスパンを追加できます。

<span id="mymarker"></span>

次に、jquery $（ "＃mymarker"）を使用してスパンを取得し、「left」プロパティを取得します。その数を列の幅（column-gapに合わせて調整）で割ると、この最後の要素がどの列にあるかがわかります。値のMath.ceil（）を使用すると、列数がわかります。

Answer 2

列コンテナを次のように除算しscrollable widthますvisible width。

container.scrollWidth / container.offsetWidth

Answer 3

これを試して：

$.fn.howMuchCols = function(){
  return Math.round($(this).find(' :last').position().left - $(this).position().left / $(this).outerWidth()) +1;
};

$('.my-stuff-with-columns').howMuchCols();

コードの説明：

このコードは、各jQuery要素に関数'howMuchCols'を作成します。

要素の幅は各内部列サイズを定義するために使用されるため、従来の方法を使用して列を持つ要素の幅を取得することはできません。要素が内部にある列の数を知るには、要素の実際の幅を取得し、列のサイズで割る必要があります。そうすると、列の量がわかります。

実際の幅を取得する方法は、列コンテナーの最後の子要素のXオフセットをその幅と合計し、次にそれを列コンテナーのXオフセットの合計で減算することです。

コードでは、除算前のピクセル単位を使用するのではなく、減算と除算を行った後に1列のサイズを追加しました（違いはありません）。

コンテナのサイズが内側の列の幅で正確に割り切れるとは限らないため、Math.roundが存在する必要があります。

Answer 4

class = "another-column"などの各列にクラスを設定してから、Jqueryを使用してクラスを選択し、それらを反復処理できますか。

var count = 0;
$('.another-column').each(function(){
    count++;
});

警告、これはテストされていません。html / css3コードを提供できれば、jsfiddleでテストできます。