0

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

下面是我的代码示例，div 是用 PHP 写入屏幕的。我可能会切换到 UL 和 LI，但由于只有在调整浏览器窗口大小后才会显示 HTML……是否有一些 JavaScript 强制重绘/重新加载我应该做的，在我的同位素文档中没有任何内容'已经遇到并且演示在我的 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>
4

2 回答 2

2

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

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

  $container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 75
    }
   });
});
于 2013-09-17T02:15:15.027 回答
0

我继续前进。我现在在www.muschamp.ca上的一切都按我喜欢的方式工作。尽管我尝试了很多，但我并没有真正对 Isotope 或 JavaScript / CSS 进行任何更改。我最终解决这个问题的重大改变是使用 PHP 来确定图像的高度和宽度。Isotope 文档说没有这个也可以工作，但根据我的经验，如果你给 JavaScript 提供准确的图像尺寸，它会工作得更好。

我不确定使用 getimagesize() http://php.net/manual/en/function.getimagesize.php会对性能造成多大影响，但在写出我的图像标签结果之前添加一个调用每次都完美渲染。作为妥协，我获取的图片/RSS 提要稍微少一些。

希望我的反复试验和简单的演示可以帮助一些人。

于 2013-11-04T16:36:28.863 回答