0

以下のコードを使用しているので、コンテナ内で画像をランダムに配置します。この効果はうまく機能しますが、ほとんどの場合、関数の読み込みやアクセスに失敗し、ページ上ですべての画像がぎこちなく重なり合って表示されます。

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

4

1 に答える 1

0

私が見ることができるように、画像が互いに重なっていないことを保証するコードは何もありません。

Masonry コードを削除し、「各画像」のコレクションを刺激して、各画像で一意のマージントップを使用していることを保証します/またはどのようにしますか。

$(document).ready(function(){
  var i = 0;
  $('.each-image').each(function() {
    i++;
    $(this).css({ 
       'margin-top':  (Math.floor((Math.random() * 300) +1) * (i*400)) + 'px', // Or change the facator to the images size
       'margin-left': Math.floor(Math.random() * 400 + 0) + 'px' });
  });
});
于 2012-08-06T14:22:02.347 に答える