以下のコードを使用しているので、コンテナ内で画像をランダムに配置します。この効果はうまく機能しますが、ほとんどの場合、関数の読み込みやアクセスに失敗し、ページ上ですべての画像がぎこちなく重なり合って表示されます。
$(document).ready(function(){
$('.each-image').each(function() {
$(this).css({
'margin-top': Math.floor((Math.random() * 300) +1) + 'px',
'margin-left': Math.floor(Math.random() * 400 + 0) + 'px' });
});
});
重なりを避けるために、これと組み合わせて石積みも使用しています。最初に石積みが呼び出され、画像が整理されます。次に、ランダム関数がそれらすべての間の距離を広げます。
組積造コード:
$(document).ready(function(){
var $container = $('.content-side.individual-pages');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.each-image',
columnWidth: 30,
isAnimated: true
});
});
});
プロジェクトへのリンクは次のとおりです: http://www.sarahstaton.com/exhibitions-installations/を更新すると、機能する場合と機能しない場合があります。
私の質問は、本当に、何か他のものを使用する必要があるかどうか、またはランダム関数を強化するために何ができるかということです.
ありがとう、R