jQuery Isotope插件:生成随机大小的图像 [英] Jquery Isotope plugin: Generating random sized images

问题描述

我将jQuery Isotope插件与具有背景图像且具有特定大小的div配合使用:

I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size:

.frontpageimage {
    height: 200px;
    width: 200px;
    background-image: url('tile1.jpg');
}

这很好.但是我想在里面扔一些东西，随机选择并成像，使其比其他东西更大，所以我创建了这个:

This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this:

$('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');


.frontpageimagehigh {
    height: 420px;
    width: 200px;
}

(注意:目前很难选择第二张图片-稍后会进行随机化.)

(note: currently it is hard coded to select the 2nd image - will work on the randomisation later.)

问题是如果我在称为同位素的上方插入上面的代码，它将无法正常工作.

Trouble is if I insert the above code above where Isotope is called it doesnt work.

如果在调用同位素之后插入上述代码，它可以工作，但是图像重叠-即:在同位素渲染图像之后，图像会改变大小.

If I insert the above code after Isotope is called, it works but the images overlap - ie: the image changes size after Isotope has rendered them.

有人知道如何将其添加到现有同位素脚本中吗?还是有人对我有什么建议?请让我知道是否需要澄清.

Does anyone know how to perhaps add this to the existing isotope script? Or would anyone have any suggestions for me? Please let me know if clarification is needed.

谢谢

推荐答案

好，所以我发现添加自己的类而不是isotope-item并调整我的JQuery并将其移回到isotope调用之上就可以了:

OK, so I found adding my own class to use instead of isotope-item and adjusting my JQuery as well as moving it back above the isotope call did the trick:

$('#isotopecontainer .item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');

<div class="item isotope-item"...

希望这对某人有帮助.如果您需要更多信息，请留言给我

Hope this helps someone. Please msg me if you need more info

这篇关于jQuery Isotope插件:生成随机大小的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！