0

我的目标 ：

使用 jQuery 插件在 jQuery Mobile 页面内grid-a-licious显示类似pinterest 的网格。页面加载时，图像必须以网格形式排列。

（失败的）结果：

我想出的代码在这里说明：http: //jsfiddle.net/hxNDE/6/

基本上，我使用pageshowJQM 事件来激活 Grid-a-licious。它可以工作，但是由于页面转换而导致严重闪烁：

$('#page-2').on('pageshow', function () {
    $("#grid").gridalicious({
        gutter: 1,
        width: 100
    });
});

当我改用pagebeforeshow事件时，它根本不起作用，因为 Grid-a-licious 无法检测屏幕宽度并决定要构建多少列：

$('#page-2').on('pagebeforeshow', function () {
    ...same...
});

当前解决方法： 我已禁用所有 JQM 过渡动画，因此当图像以网格排列时没有可见的闪烁。

我想找到一个解决方案，我可以使用 JQM 转换和 Grid-a-licious 而不会闪烁。

  • 通过在 JQM 中找到方法
  • 或者，通过修改非常短的 Grid-a-licious 插件来克服这种情况

有什么建议么 ？

4

1 回答 1

0

我修复了我的问题，并修复了 Grid-A-Licious git 存储库：

https://github.com/suprb/Grid-A-Licious/pull/22

基本上，当 cssdisplay被隐藏或者不是处于正常状态时，宽度计算错误

var swappedStyle = this.box.css('display');
this.box.css('display', 'block');
width = this.box.width(); // Previously, only this line
this.box.css('display', swappedStyle);

备注：

  • 这不会启用 jQuery Mobile 转换，而只是让 Gris-A-Licious 可用于 JQM
  • 还包括对触发大量调整大小事件的 iOS 设备的修复，从而使 Gridalicious 闪烁并滚动到顶部
于 2013-08-27T10:11:42.227 回答