Freewall jQuery 插件 - 在移动设备上查看，某些图块的宽度设置为零

Question

我在使用 Freewall jquery 插件时遇到了一些问题，这很奇怪。

基本上，当我在屏幕尺寸超过 580 像素的任何设备上加载页面时，网格工作得非常好。但是，如果我在移动设备屏幕上加载页面，大约小于 580 像素，90% 的图块宽度将设置为零，当然会破坏网格布局。

此外，在移动设备上加载页面或使用移动尺寸后调整视口大小时，破碎的网格图块仍然没有设置为零以外的宽度！

这很令人困惑，因为一切正常，然后突然间，他们开始这样做了。

我试过回溯我的步骤，看看我在全部设置后所做的事情是否破坏了它，但没有任何效果。

我在 giphy 上制作了一张 gif 动图，展示了我想表达的意思。正如他们所说，一张图片说一千个单词。 :)

此外，这是我的免费墙功能：

// FreeWall Grid Settings
    $(function() {
    var wall = new freewall(".grid_container");
    wall.reset({
        fixSize: false,
        animate: true,
        cache: true,
        cellW: 292.5, // These are what saved the day!
        cellH: 284, // These are what saved the day!
        gutterX: 1,
        gutterY: 1,
        onResize: function() {
            wall.fitWidth();
        }
    });
    wall.fitWidth();

});

谢谢大家。

GIF Link: http://gph.is/1lhoXWe

Answer 1

我最终通过更改一些 CSS 解决了这个问题。特别是网格瓦片的高度。

FreeWall 对我没有设置高度感到不高兴，所以我添加了一个最小高度规则，问题就解决了。

Answer 2

如果其他人像我一样在这里结束 - 对我来说问题是我提供的 CellW 是 300 - 当我到达某个点时，项目的宽度为 0 - 更窄（导航消失的地方） ) 有更多的空间所以 300 工作。答案是将 cellW 设置为 200 - 效果很好

Freewall jQuery 插件 - 在移动设备上查看，某些图块的宽度设置为零

Freewall jQuery Plugin - Viewing on mobile, certain tiles get width set to zero

jquery

responsiveness

freewalljs