桌面和移动视图的占位符

Posted 2023-02-24

【中文标题】桌面和移动视图的占位符

【英文标题】：Placeholders for desktop and mobile views

【发布时间】：2014-06-25 20:24:59

【问题描述】：

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

目标

我有一个 单个 容器，其中包含静态宽度的块，例如 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);

你有什么想法吗？

【问题讨论】：

这可能有点小技巧，并且只有在您的块也具有固定高度时才有效：创建一个包含占位符块的背景图像/图案并将其附加到您的容器中。块将覆盖背景中的占位符图像，并且空白空间将被它们填充，无论是移动设备还是桌面设备。不涉及计算或 JS。

@christian314159 这些块的高度是固定的，我首先想到的是您的解决方案。但是，当我进行简单的窗口调整大小时，这些块具有正确的边界线，它们永远不会与背景图像的边界线正确重合。因此，保持静态占位符块似乎是始终良好地显示页面的唯一方法。

【参考方案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" />');
    

【讨论】：

您的方法对我帮助很大！但是，正如您所提到的，在某些情况下，它会添加额外的占位符，这些占位符可以组合在一个没有特定类的占位符下。我已经更新了您的解决方案，支持组合，还修复了0 块的正确显示：jsfiddle.net/5qpsj/2。您可以更新您的答案，我会接受。感谢您的帮助！