Question

我正在考虑再次重做我的主页，并考虑使用Isotope让它变得更加漂亮。我过去曾尝试使用Isotope，但由于无法让它像我想要的那样工作而感到沮丧。这次我想做一些更简单的事情。我做了一个super simple example来说明我的最新一期。除非您调整浏览器窗口的大小，否则图像不会在Safari和其他浏览器中显示。

下面是我的代码示例，使用PHP将div写入屏幕。我可能会切换到UL和LI，但因为HTML只是在浏览器窗口调整大小之后才显示...是否有一些JavaScript强制重绘/重新加载我应该这样做，在Isotope文档中没有任何关于我的内容在我的MacBook Pro上遇到过Safari和演示程序。

我尝试了其他一些浏览器，它在IE8中的设计工作，但我的工作机器上的Firefox似乎与Safari的反应相同。

<div id="contents">
<h1>Making the Internet better since 1995</h1>
<!-- Masonry test code -->
<div id="container">
    <div class="item"><a href="http://www.flickr.com/photos/mminghella71/9440123324/in/pool-341554@N24" title="Bolt Action Heer Infantry Squad"><img src="http://farm6.staticflickr.com/5333/9440123324_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></a></div>
</div>
<script>
$(function(){

  var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 75
    }
   });

 });
 </script>

Answer 1

您是否尝试将功能放入Windows.load？

$(window).on('load', function () {
var $container = $('#container');

  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 75
    }
   });
});

Answer 2

我继续前进。我现在已经在www.muschamp.ca上完成了我喜欢的一切。虽然我尝试了很多，但我并没有对Isotope或JavaScript / CSS进行任何更改。我最终解决这个问题的最大变化是使用PHP来确定图像的高度和宽度。 Isotope文档说没有它会工作，但根据我的经验，如果你给JavaScript准确的图像尺寸它会更好。

我不确定使用getimagesize（）http://php.net/manual/en/function.getimagesize.php会有多大的性能影响，但在写出我的图片代码之前添加一个调用会导致每次都完美呈现。作为折衷方案，我获取的图像/ RSS源略少。

希望我的试错法和简单的演示可以帮助一些人。

Safari中简单Isotope示例的问题

2 个答案: