Web ページの 1 つに組積造スクリプトを使用しています。
これはJSです(jQuery、Typescript、およびImagesLoadedプラグインを使用):
$(function(){
// or with jQuery
var $container;
function triggerMasonry() {
// don't proceed if $container has not been selected
if ( !$container ) {
return;
}
// init Masonry
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.item',
stamp: '.stamp',
gutter:20
});
});
}
// trigger masonry on document ready
$(function(){
$container = $('#container');
triggerMasonry();
});
// trigger masonry when fonts have loaded
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
});
これは非常にうまく機能しています。
しかし、アイテムをレンダリングして石積みに表示する前に、アイテムをシャッフルする必要があります。これはどういうわけか可能ですか?
Isotope を使用しようとしましたが、packery を調べましたが、どちらも私の Web サイトではうまくいきませんでした。
いつも助けてくれてありがとう!