桌面和移动视图的占位符

Question

要实施一项相当具有挑战性的任务，这完全让我心烦意乱。也许有人会根据以下描述建议如何生成算法。

目标

我有一个 单个 容器，其中包含静态宽度的块，例如 150px。桌面设备的容器宽度为600px，移动设备为450px。这意味着在桌面版本中，我连续有 4 个块，而在移动版本中，我连续有 3 个块。要完成连续留下的所有空间（如果有），我需要添加看起来像其他块但没有内容且颜色不同的占位符。添加的占位符的数量应始终相同，但有些应隐藏在桌面版本中，有些应隐藏在移动版本中。我需要使用 CSS 在不同屏幕上隐藏和显示占位符，并使用 JavaScript 在页面加载时添加占位符。

示例

考虑下面的 5 个块 标记，其中包含内容和 3 个占位符：

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>
    <article>Article 5</article>

    <span>Placeholder 1</span>
    <span class="mobile-hide">Placeholder 2</span>
    <span class="mobile-hide">Placeholder 3</span>
</section>

演示： http://jsfiddle.net/5qpsj/

这里我有 1 个基本占位符和 2 个隐藏在移动屏幕上的占位符。但是，如果内容块的数量是 4，那么占位符的组合就会变得不同，仅显示 2 个占位符，这些占位符必须在桌面屏幕上隐藏：

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>

    <span class="desktop-hide">Placeholder 1</span>
    <span class="desktop-hide">Placeholder 2</span>
</section>

演示： http://jsfiddle.net/5qpsj/1/

我尝试了不同数量的内容块并创建了下表可能的组合：

---------------------------------------------------------------------
| Blocks | Placeholders | <no class> | .mobile-hide | .desktop-hide |
---------------------------------------------------------------------
|      0 |            4 |          3 |            1 |             0 |
|      1 |            3 |          2 |            1 |             0 |
|      2 |            2 |          1 |            1 |             0 |
|      3 |            1 |          0 |            1 |             0 |
|      4 |            2 |          0 |            0 |             2 |
|      5 |            3 |          1 |            2 |             0 |
|      6 |            2 |          0 |            2 |             0 |
|      7 |            3 |          0 |            1 |             2 |
|      8 |            1 |          0 |            0 |             1 |
|      9 |            3 |          0 |            3 |             0 |
|     10 |            2 |          2 |            0 |             0 |
|     11 |            1 |          1 |            0 |             0 |
|     12 |            0 |          0 |            0 |             0 |
|     13 |            3 |          2 |            1 |             0 |
|    ... |          ... |        ... |          ... |           ... |
---------------------------------------------------------------------

从 13 块开始 组合保持与 1 块、2 块等相同。就我个人而言，这些数字中没有任何模式，这使我无法编写适当的算法来添加占位符并在页面加载时设置所需的类。

当然，我可以硬编码从 0 到 12 个块的值，或者使用在页面调整大小时检查容器宽度并添加/删除所需数量的占位符的方法（性能很差！），但我的目标是生成代码，它在加载时完成所有这些工作，然后仅依赖 CSS。

所以基本上是这样的：

for (var i = 0; i < [number_of_placeholders]; i++) {
    var placeholder = document.createElement('span');
    if ([condition]) {
        placeholder.className = 'mobile-hide';
    }

    if ([condition]) {
        placeholder.className = 'desktop-hide';
    }

    section.appendChild(placeholder);
}

你有什么想法吗？

Answer 1

所以，这是我的方法。随意用 VanillaJS 替换 jQuery 位。您可能会更聪明地使用所需的占位符并计算桌面和移动设备之间是否有一些共享。我只是单独添加它们，然后让 CSS 来处理。在这里查看我的示例http://jsfiddle.net/yThng/（添加更多.blocks 并再次运行以查看它是否有效）：

function generatePlaceholders(){
    var mobileRowCount      = 3, // blocks per row on mobile
        desktopRowCount     = 4, // blocks per row on desktop

        // how many blocks are there?
        blockCount          = $('.block').length,

        // how many placeholders on mobile/desktop needed
        mobilePlaceholders  = 0,
        desktopPlaceholders = 0,

        // iterator
        i;


    // use modulo to see if there are rows that are not filled (on mobile)
    if( blockCount%mobileRowCount > 0 ){
        // if there are, calculate how many placeholders needed
        mobilePlaceholders = mobileRowCount - blockCount%mobileRowCount;
    }

    // same as above, but for desktop
    if( blockCount%desktopRowCount > 0 ){
        desktopPlaceholders = desktopRowCount - blockCount%desktopRowCount;
    }

    // append needed desktop placeholders
    for( i=0; i < desktopPlaceholders; i++ ){
        $('#container').append('<div class="desktop-only-placeholder" />');
    }

    // append need mobile placeholders
    for( i=0; i < mobilePlaceholders; i++ ){
        $('#container').append('<div class="mobile-only-placeholder" />');
    }
}