Javascript 桌面和移动视图的占位符

有一个相当具有挑战性的任务要执行，这让我彻底崩溃了。也许有人会建议如何根据以下描述生成算法

客观的 我有一个带有静态宽度块的容器，比如说

150px

。桌面设备的容器宽度为

600px

，移动设备的容器宽度为

450px

。这意味着在桌面版中，我有4个块，在移动版中，有3个块。要完成一行中剩余的所有空间（如果有），我需要添加占位符，这些占位符看起来像其他块，但没有内容，颜色也不同。添加的占位符数量应始终相同，但有些占位符应隐藏在桌面版本中，有些占位符应隐藏在移动版本中。我需要使用CSS在不同的屏幕上隐藏和显示占位符，使用JavaScript在页面加载时添加占位符

例子 考虑使用内容和3个占位符的5个块的以下标记：

<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>

这里我有一个基本占位符和两个隐藏在手机屏幕上的占位符。但是，如果内容块的数量为4，则占位符的组合将不同，仅显示两个必须隐藏在桌面屏幕上的占位符：

<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>



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

---------------------------------------------------------------------
| 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 |
|    ... |          ... |        ... |          ... |           ... |
---------------------------------------------------------------------

---------------------------------------------------------------------
|块|占位符| |.移动隐藏|.桌面隐藏|
---------------------------------------------------------------------
|      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);
}

for（变量i=0；i<[占位符的数量]；i++）{
var占位符=document.createElement（'span'）；
如果（[条件]）{
placeholder.className='mobile hide'；
}
如果（[条件]）{
placeholder.className='桌面隐藏'；
}
第.appendChild节（占位符）；
}

你有什么想法吗？
所以，这是我的方法。可以用VanillaJS替换jQuery位。您可能会更聪明地使用所需的占位符，并计算桌面和移动设备之间是否存在共享。我只是单独添加了它们，让CSS来处理。请参见我的示例（添加更多
.block
s并再次运行以查看其是否有效）：

函数generatePlaceholders（）{
var mobileRowCount=3，//移动设备上每行的块数
desktopRowCount=4，//桌面上每行的块数
//有多少个街区？
blockCount=$（'.block'）。长度，
//移动/桌面上需要多少占位符
mobilePlaceholders=0，
desktopPlaceholders=0，
//迭代器
我
//使用模查看是否有未填充的行（在移动设备上）
如果（块计数%mobileRowCount>0）{
//如果有，请计算需要多少占位符
mobilePlaceholders=mobileRowCount-区块计数%mobileRowCount；
}
//同上，但适用于桌面
如果（blockCount%desktopRowCount>0）{
desktopPlaceholders=desktopRowCount-块计数%desktopRowCount；
}
//附加所需的桌面占位符
对于（i=0；i
这可能有点老套，仅在块具有固定高度时才起作用：创建包含占位符块的背景图像/图案，并将其附加到容器中。块将覆盖背景中的占位符图像，而空白区域将由它们填充，无论是移动还是桌面。没有计算或JS参与。@christian314159这些积木的高度是固定的，我首先想到的是你的解决方案。但是，当我做简单的窗口调整时，这些块有右边框线，它们永远不会与背景图像的边框线正确重合。所以保持静止
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" />');
    }
}