10

container 内に 6 つの<div>要素があるとし<div>ます。これらの 6 つの div はそれぞれ正方形で、CSS スタイルfloat: leftが適用されています。デフォルトでは、コンテナの端に到達する<div>と折り返されます。

さて、私の質問は、Javascript を使用して、ラップがどの要素にあるかを判断することは可能ですか?

次のようにページに表示される場合:

 ___   ___
| 1 | | 2 |
----- -----
 ___   ___
| 3 | | 4 |
----- -----

2 番目と 3 番目の要素の間でラップが発生することを確認しようとしています。私が正気を失ったかどうか疑問に思っている方のために説明すると、これらのボックスの 1 つがクリックされた場合にこれを実行しようとしている理由は、派手な shmansy jQuery を使用して行の間に情報領域をドロップダウンできるようにしたいからです。

 ___   ___
| * | | ! |
----- -----
| Someinfo|
 ___   ___
| * | | * |
----- -----

休憩がどこで発生するかを判断するためのアイデアはありますか?

PS私がフローティングして自動ラップさせている理由は、レスポンシブにするためです。現在、ブラウザのサイズを変更すると、それに応じてボックスがラップされます。列幅をハードコーディングしたくありません。

[編集] Explosion Pills から提供された回答のおかげで、解決策を思いつくことができました。

// Offset of first element
var first = $(".tool:first").offset().left;
var offset = 0;
var count = 0;

$(".box").each(function () {

   // Get offset            
   offset = $(this).offset().left;

   // If not first box and offset is equal to first box offset
   if(count > 0 && offset == first)
   {
      // Show where break is
  console.log("Breaks on element: " + count);
   }

   // Next box
   count++;
});

これにより、コンソールに次のように出力されます。

Breaks on element: 7 
Breaks on element: 14
Breaks on element: 21
Breaks on element: 28

30個のボックスがあったとき、最終的には幅7ボックス、5行になりました（最後の行は2ボックスのみ）

4

4 に答える 4

8

要素を反復処理して、上位の位置を比較することをお勧めします。

el.position().top;

上の値が異なる場合 - この要素は次の行にあります!

これがフィドルです：http://jsfiddle.net/J8syA/1/

このようなソリューションの利点は、要素やパディングなどの正確なピクセル幅を知る必要がないことです。css が変更された場合でも、このコードは行の最後の要素を見つけます。

于 2012-07-09T19:06:56.453 に答える
8

コンテナの幅をボックスの幅で割るだけです..
（正方形の幅が等しいと仮定します..）

これにより、各行の最後の要素が選択されます

var wrapper = $('.wrapper'),
    boxes = wrapper.children(),
    boxSize = boxes.first().outerWidth(true);

$(window).resize(function(){
    var w = wrapper.width(),
        breakat = Math.floor( w / boxSize); // this calculates how many items fit in a row 

    last_per_row = boxes.filter(':nth-child('+breakat+'n)') // target the last element of each row
    // do what you want with the last_per_row elements..
});

http://jsfiddle.net/gaby/kXyqG/のデモ

于 2012-07-09T18:51:48.787 に答える
4 
var offset = 0;
var last = 0;
$(".wrappable-box").each(function () {
   offset = $(this).offset().left;
   if (offset < last) {
      //this is the first box after a wrap
   }
   last = offset;
});
于 2012-07-09T18:39:51.960 に答える