Jquery Isotope plugin: Generating random sized images

问题

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.

Thanks

回答1:

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

来源：https://stackoverflow.com/questions/13814738/jquery-isotope-plugin-generating-random-sized-images