Question

我的目标：

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

（失败）结果：

基本上，我使用pageshow JQM事件来激活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插件来克服这种情况

有什么建议吗？

Answer 1

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

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

基本上，当css display被隐藏或者处于正常状态时，错误地计算了宽度

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转换，但只是使用JQM可以使用Gris-A-Licious
还包含针对iOS设备的修复程序，它会触发大量调整大小事件，从而使Gridalicious闪烁并滚动到顶部

Grid-a-licious插件在jQuery Mobile页面加载时闪烁

1 个答案: