0

我正在使用 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/lcsoumpyl/

在设备上进行调试不会向 logCat 抛出明显的错误。

4

1 回答 1

0

我使用同位素发现了两件诡计多端的事情，顺便说一句，我还没有掌握。

设置图片的宽度和高度

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

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

从同位素文档：

大多数布局模式（即 masonry、fitRows）需要测量每个项目的大小以适当地考虑其在布局中的空间。已卸载的媒体文件（如图像和@font-face 字体）可能会影响布局并导致项目元素相互重叠。理想情况下，应在加载所有内部内容后初始化同位素布局。

媒体加载后的同位素初始化

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

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

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

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

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

$container.imagesLoaded( function(){
  $container.isotope({
    // options...
  });
});

$(window).load() 另一种解决方案是在 $(window).load() 而不是 $(document).ready() 中初始化 Isotope。这将在页面上的所有媒体加载后触发 Isotope。

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

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

于 2013-10-04T14:29:31.273 回答