Question

我正在使用Phonegap将项目部署到iOS和Android平板电脑，IsotopeJS正用于布置应用程序基于图像的菜单。

相关代码在JSFiddle中，有一个值得注意的区别，因为MainMenuInit（）是在响应DeviceReady事件时被调用的，而这里是从document.ready中调用的。

http://jsfiddle.net/TLQ6q/2/

function MainMenuInit() {
    var $container = $('.isotopeMenu');
    $container.imagesLoaded(function () {
        ResizeMainMenuTiles();
    });
}

function ResizeMainMenuTiles() {
    console.log("Resizing Menu");
    var $container = $('.isotopeMenu');
    var $height = 250;


    $container.isotope({
        width: 1024,
        height: 768,
        itemSelector: ".isotopeItem",
        layoutMode: 'masonryHorizontal',
        masonryHorizontal: {
            rowHeight: $height,
            gutterWidth: 0
        }
    });

}

它正确地列出了小提琴中的项目，但是当通过Phonegap部署到我的Android设备时，同位素菜单被折叠，所有项目都覆盖在同一位置。

这是设备的截图

http://postimg.org/image/lcsoompyl/

在设备上进行调试不会给logCat带来明显的错误。

Answer 1

我使用同位素发现了两个欺骗性的东西，我仍然没有掌握BTW。

设置图像的宽度和高度

如果可以或以编程方式尝试从头开始设置图像的宽度和高度，并在使用最新方法时刷新内容包装。

<img src="img-file.jpg" width="280" height="160" />

来自同位素文件：

大多数布局模式（即砌体，fitRows）需要测量尺寸每个项目在布局中适当考虑其空间。卸载的图像和@ font-face字体等媒体文件可能会丢失布局和导致项目元素彼此重叠。理想的情况下，所有内部内容都应该初始化同位素布局加载。

加载介质后的同位素初始化

一旦确定已加载所有媒体内容，请尝试初始化同位素。同位素提供了一种方法并推荐另一种方法。

http://isotope.metafizzy.co/docs/help.html#images

从文档中提取，但请务必查看上面链接中的官方文章。

下一个最佳解决方案是使用Isotope附带的 imagesLoaded 插件。它是一个小插件，可以在上下文中查找所有图像，并在所有图像加载后触发回调函数。

var $container = $('#container'); $container.imagesLoaded( function(){ $container.isotope({ // options... }); });

<强> $（窗口）.load（）另一个解决方案是在$（window）.load（）中初始化Isotope而不是$（document）.ready（）。这将在页面上的所有媒体加载后触发Isotope。

$(window).load(function(){ $('#container').isotope({ // options... }); });

希望它有所帮助，让我们知道它是如何运作的。

IsotopeJS + Phonegap：Android重叠同位素项目

1 个答案:

设置图像的宽度和高度

加载介质后的同位素初始化