1

いつものように商品をグリッドに「タイル」で表示してeショップをやっています。さまざまなサイズのタイルを使用し、(jQuery を介して) 空きスペースがないことを確認したいだけです。

基本的な状況では、960px のラッパーがあり、240x180px (クラス .grid_4) のタイルと 480x360px (クラス .grid_8) のタイルを使用したいと考えています。画像を参照してください（マージン/パディングがないことを想像してください）：

代替テキスト http://img580.imageshack.us/img580/2828/screenshot2010041508h52.png

jQuery を使用しない場合の問題:

  • CMS が大きなタイルを 6 番目として提供する場合、5 番目のタイルの下に空きスペースがあります。
  • CMS が 7 番目として大きなタイルを提供する場合、5 番目と 6 番目の下に空きスペースがあります。
  • CMS が大きなタイルを 8 番目として提供すると、次の行に移動し、8 番目の位置が空いたままになります。

これまでの私のソリューションは次のようになります。

$(".grid_8").each(function(){
        //console.log("BIG on position "+($(this).index()+1)+" which is "+(($(this).index()+1)%2?"ODD":"EVEN"));

        switch (($(this).index()+1)%4) {

            case 1:
                // nothing needed
                //console.log("case 1");
                break;

            case 2:
                //need to shift one position and wrap into 240px div
                //console.log("case 2");
                $(this).insertAfter($(this).next()); //swaps this with next
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />");

                break;

            case 3:
                //need to shift two positions and wrap into 480px div
                //console.log("case 3");
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps previous two - forcing them into column 
                $(this).nextAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps next two - forcing them into column
                $(this).insertAfter($(this).next()); //moves behind the second column
                break;

            case 0:
                //need to shift one position
                //console.log("case 4");
                $(this).insertAfter($(this).next());
                //console.log("shifted to next line");
                break;

        }

    });

コメントから、それがどのように機能するかは明らかなはずです-通常、必要に応じて1つの位置を戻すことにより、大きなタイルが奇数の位置にあることを常に確認します(先行する小さなタイルの数は偶数です)。また、大きなタイルの左側にある小さなタイルは、行ではなく列に表示されるように、別の div でラップする必要があります。

最後に質問：

  • 関数を一般化して、720x360 (3x2)、480x540 (2x3) などのさらに多くのタイル サイズを使用できるようにする方法は?
  • 関数を単純化する方法はありますか？
  • 実際の位置を確認するときに、大きなタイルが小さなタイルの倍数としてカウントされることを確認する必要があります。位置 12 (3 行目の最後のタイル) のタイルで index() を使用すると 7 (位置 8) が返されるため、位置 5 と 9 のタイルは 1 つの列にまとめられ、大きなタイルも単一の div であるため、ただし、2x2 の位置にまたがります。これを確実にするためのきれいな方法はありますか？

ヒントをありがとうございました。コードを自由に再利用してください。役に立つと思います。

ヨーゼフ

4

2 に答える 2

3

masonry という jQuery プラグインを使用する必要があるようです。

ここで見つけることができます

于 2010-04-15T07:25:45.073 に答える
0

これはあなたにとって十分に単純化されていますか？

$(".grid_8")
.each(function () {
switch (($(this)
    .index() + 1) % 4) {
    case 1:
        break;
    case 2:
        $(this)
            .insertAfter($(this)
            .next()), $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />');
        break;
    case 3:
        $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .nextAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .insertAfter($(this)
            .next());
        break;
    case 0:
        $(this)
            .insertAfter($(this)
            .next())
}
})
于 2012-11-09T01:05:56.407 に答える