Question

我正在使用下面的代码，因此随机将图像放在容器中。效果很好，但是，在大多数情况下，该功能无法加载和访问，并且所有图像在页面上相互显示笨拙。

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

Answer 1

代码中没有任何内容可以保证图像不会相互重叠。

删除砌体代码并激怒“每个图像”的集合并保证您在每个图像上使用唯一的margin-top /或者您想要什么。

$(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' });
  });
});

JS随机函数和砌体导致问题

1 个答案: