Question

考虑以下jsfiddle：

它与Isotope显示出非常酷的砖石效果。如果您拖动容器手柄或调整窗口大小，您将注意到元素如何根据CSS和Javascript的组合获得响应宽度。

根据不同的断点，脚本允许您定义不同设备所需的列号：

var w = $container.width(), 
    columnNum = 1,
    columnWidth = 0;
    if (w > 1200) {
        columnNum  = 5;
    } else if (w > 900) {
        columnNum  = 4;
    } else if (w > 600) {
        columnNum  = 3;
    } else if (w > 300) {
        columnNum  = 2;
    }

在4列网格中，要使元素宽2列，宽50％，项目所需的CSS将为：

.example .item-w2 {
    width: 40%;
}

因此，以下javascript部分将其转换为像素：

multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;

现在，我已经修改了同样的脚本以满足我的需求，在这种情况下，在4列网格上有一个100％宽度的模块，所以现在，如果你看看：

http://jsfiddle.net/dmf8xfch/1/

...你会注意到我修改了CSS以获得某些元素的所需宽度，所以我只添加了另一个类：

.example .item-w3 {
    width: 80%;
    background: #ED9393;
}

因此，80％的宽度通过javascript计算为您提供实际的100％。

问题是，在较小的分辨率（宽度低于400px）下，元素大于容器和屏幕。它溢出到右边。

所有内容都与以下javascript部分有关：

width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4

但是我不确定我是否理解我自己更改代码的方法，并在响应式视图中将该元素设置为100％全屏幕。

同位素 - 使响应的砖石元素全宽

0 个答案: