Javascript 给第一个砌体/同位素随机项目一个类

Javascript 给第一个砌体/同位素随机项目一个类,javascript,jquery,jquery-masonry,jquery-isotope,Javascript,Jquery,Jquery Masonry,Jquery Isotope,这是一个相当复杂的修改。我用同位素建立了一个网格系统。客户端希望每次用户访问页面时该网格都是随机的。这很容易设置使用同位素通过添加排序:'随机' 然而,同位素中的第一个项目有一个“特色”类别。这个特色类激活了一个更宽的网格元素和一些信息供用户点击,因此这将始终是我网格中的第一项 现在,我需要做的是每次将随机序列中的第一个元素设置为“特色”。因此,每次用户访问页面时,特色网格项都会有所不同。目前,因为我已经硬编码了这个类的特性,所以它只是被随机地放在网格中 有没有给随机序列中的第一个元素一个类?这

这是一个相当复杂的修改。我用同位素建立了一个网格系统。客户端希望每次用户访问页面时该网格都是随机的。这很容易设置使用同位素通过添加排序:'随机'

然而,同位素中的第一个项目有一个“特色”类别。这个特色类激活了一个更宽的网格元素和一些信息供用户点击,因此这将始终是我网格中的第一项

现在,我需要做的是每次将随机序列中的第一个元素设置为“特色”。因此,每次用户访问页面时,特色网格项都会有所不同。目前,因为我已经硬编码了这个类的特性,所以它只是被随机地放在网格中

有没有给随机序列中的第一个元素一个类?这是我的代码:

<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>

var$container=$(“#主网格”);
$container.com({
//选项。。。
可调整大小:true,//禁用正常调整大小
糟糕的是:‘随机’,
//将columnWidth设置为容器宽度的百分比
砌体:{columnWidth:$container.width()/2}
});
$(窗口)。smartresize(函数(){
$container.com({
//将columnWidth更新为容器宽度的百分比
砌体:{columnWidth:$container.width()/2}
});
});

有一种方法可以给随机序列中的第一个同位素元素一个类

使用回调函数,在该回调函数中,通过查找每个同位素元素的特定值,找出哪个元素定位为第一个元素:

  • 每个元素的
    transform
    矩阵值:
    tx
    ty
  • $container
    padding值:
    padding top
    padding left
  • 获得这4个值后,检查
    tx
    的值是否与
    padding left
    匹配,以及
    ty
    的值是否与
    padding top
    匹配


    如果这两个条件都为真/匹配,请将自定义类(例如,
    .featured
    )指定给该元素。

    谢谢Shoda,但我认为这超出了我的能力范围。你能给我看一下代码吗?D.Desandro也给我回了信->