0

これはかなり複雑な変更です。同位体を使用してグリッドシステムをセットアップしました。クライアントは、ユーザーがページにアクセスするたびに、このグリッドがランダムになることを望んでいます。これは、sortBy: 'random' を追加することで同位体を使用して簡単に設定できます。

ただし、同位体の最初の項目には「特集」のクラスがあります。この注目のクラスは、より広いグリッド要素と、ユーザーがクリックできるいくつかの情報をアクティブにするため、これは常にグリッドの最初の項目になります。

今、私がする必要があるのは、ランダムシーケンスの最初の要素を毎回「特集」するように設定することです。したがって、ユーザーがページにアクセスするたびに、おすすめのグリッド アイテムは異なります。現時点では、取り上げるクラスをハードコーディングしているため、これはグリッド全体にランダムに配置されます。

ランダムシーケンスの最初の要素にクラスを与える方法はありますか? これは私のコードです:

<script>
           var $container = $('#home-grid');

            $container.isotope({
              // options...
              resizable: true, // disable normal resizing
              sortBy : 'random',
              // set columnWidth to a percentage of container width
              masonry: { columnWidth: $container.width() / 2 }
            });

            $(window).smartresize(function(){
              $container.isotope({
                // update columnWidth to a percentage of container width
                masonry: { columnWidth: $container.width() / 2 }
              });
            });
        </script>
4

1 に答える 1

0

ランダムシーケンスの最初の同位体元素にクラスを与える方法があります!

コールバック関数を使用し、そのコールバック関数内で、各同位元素の特定の値を探して、最初の要素として配置されている要素を見つけます。

  1. transform各要素の行列値:txおよびty
  2. $containerパディング値:padding-topおよびpadding-left

これらの 4 つの値を取得したら、 の値が と一致するかどうか、および の値が とtx一致するかどうかを確認します。padding-lefttypadding-top

両方の条件が真/一致する場合は、カスタム クラスを割り当てます。.featuredその要素に。

于 2013-03-13T08:39:14.777 に答える