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 回答