2

プロジェクトで jQuery Masonry を使用しようとしていますが、正しく機能していません。グリッドの右上隅に隙間があります。グリッドの幅と余白を調整しようとしましたが、その結果、行ごとに 1 つのブロックが実行されるか、すべてのブロックが一緒に実行されます (ただし、まだ上部にギャップがあります)。

実際には、ブロックが再配置されているようには見えませんが、Masonry はそのクラスを適用し、予想どおり要素に絶対位置を割り当てています。

私は何か間違ったことをしていると確信していましたが、今はよくわかりません。スタックに関する同様の質問 (http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces) から実用的なフィドルを取得し、作業中の寸法を使用するように慎重に変更しましたで、この要素の選択を処理できないようです。

フィドル: http://jsfiddle.net/dVPA9/4/

4

3 に答える 3

2

どうやらこれは石積みや同様の解決策で消えない問題であるため、私はここで自分自身を転がす必要があると判断しました。また、デフォルトのフロートDIVには多くの状況で大きなギャップがあるため、これはPHPでより適切に処理されると判断しました。

これが私が使用したアルゴリズムであり、細かい点を説明するコメントが付いています。これはjQueryでも簡単に行うことができますが、欠点としては、JavaScriptを使用していないユーザーにとっては厄介に見えるでしょう。

$LeftPos = 0; //Tracks where we are on the grid. Our item grid is three wide, but some items may use up to three units of space.
  $j = 0; //Using a second counter to track total iterations. This is to prevent infinite loops, either because of future concerns I can't predict or because of someone setting a content block to be wider than the containing grid.

  for ($i = 0; $i < sizeOf($Items); $i++){
    if ($LeftPos == 3){ $LeftPos = 0; } //If we filled the third column on the last iteration, we loop back round.
    if ($Items[$i]['Placed'] !== true){ //If we've already put this object into the new array, skip it.
      if ($Items[$i]['SpanWidth'] + $LeftPos <= 3  || $j > (sizeOf($Items) * 3)){ //If inserting this would push us past the third column, save it for when we have more room. But if we've looped over the entire array three times, chances are we're stuck for some reason so just vomit everything out so the user can look at SOMETHING, even if it's an ugly page.
        $Placed++; //Increment the counter for placed objects.
        $Items[$i]['Placed'] = true; //Set this item as placed, too.
        $NewProducts[$i] = $Items[$i]; //Add the current item to the new array.
        $LeftPos = $LeftPos+ $Items[$i]['SpanWidth']; //And calculate our new position on the grid.
      }
    }

    if (($i+1 == sizeOf($Items) && $Placed < sizeOf($Items))) {$i = 0;} //If we reach the end and we have placed less items than we have total, loop through again.
  }
于 2012-09-24T03:56:01.650 に答える
2

まあ、あなたの問題の解決策ではないので、私に反対票を投じないでください。

私はこれら 2 つの他のプロジェクトを使用して大きな成功を収めています。

もあります：

心から、

于 2012-09-20T22:19:33.540 に答える
2

Masonry と Isotope では、すべてがモジュールで機能することを覚えておく必要があります。つまり、列幅は最小公約数 (ピクセル単位) に従う必要があります。次に、複数の列 (1 つのモジュール) にまたがる要素がある場合、利用可能な画面領域 (巨大な要素がある) によっては、2 番目の要素 (最初よりもはるかに広い) を最初の要素の右側に配置することはできません。 (2 番目よりもはるかに狭い)。

また、石積み #container (#grid) に固定幅を設定していますが、これはもちろんプラグインの目的全体に反しています。

自分の目で確かめてください: width: 1104px を削除します。#grid で、ブラウザ ビューをフィドル ページで最大にズームアウトします。スペースがあれば、2 番目の (幅の広い黒) 要素が最初の (幅の狭い灰色) 要素の右側に最終的に収まることがわかります。

したがって、すべては、列幅に適した最小公約数を見つけ、一部の要素が大きすぎず、列が多すぎないようにする (3 つ以上) ことになります。それはうまくいくでしょう。

同様の「問題」の詳細については、https://stackoverflow.com/a/11814339/963514 および https://stackoverflow.com/a/11701171/963514 も参照してください。

于 2012-09-21T07:21:04.287 に答える