javascript - CSS 和 JS : How to Inflate the Size of a Tile In Grid

Question

我精通 CSS 和 JS。在这个元素上使用 jQuery。我有一个由无序列表(带有“li”标签)组成的流体网格。每个“li”(瓷砖)具有相同的宽度和高度。随着浏览器的扩展或收缩，磁贴会向下或向上环绕以填充空间。

当用户单击图 block 时，我希望图 block 扩展到更大的固定高度和宽度，相当于两个图 block 宽度和四个图 block 高度。周围的瓷砖当然必须移动以适应充气瓷砖。但我需要瓷砖继续围绕这个现在更大的瓷砖流动，没有间隙。

我想知道是否可以使用 native CSS 实现图 block 的最终组合(带有膨胀的 float 图 block )，或者我是否需要编写 Javascript 来帮助将图 block 定位在膨胀的图 block 周围。

Answer 1

我能想到的最好方法是向选定的 li 添加一个类，并使用 CSS3 伪选择器根据位置应用和清除 float 。

例如

li.active ~ li:nth-of-type(1n+2) {
    float: left
}

li.active ~ li:nth-of-type(1n+2):after {
    content: '\0a00' // whitespace
    width: 0;
    height: 0;
    line-height: 0;
    clear: left;
}

如果您还没有遇到过它们，我将解释选择器。

/ the ~ ( tilde ) is an adjacent element selector, imagine the following html

<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li> 

And css 

li.active ~ li {
    background-color: green;
}

// the ~ would select all the li elements that come after the the occurence of 
// .active element and apply a green background. illustrated below with an *

<li></li>
<li></li>
<li class="active"></li>
<li></li> *
<li></li> *

nth-of-type 选择器允许您选择匹配元素的独立兄弟

using previous html

with this css

// the nth-of-type value can also be an equation e.g. 1n + 2
li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> *
<li class="active"></li>
<li></li>
<li></li>

结合在一起

li.active ~ li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> 
<li class="active"></li>
<li></li>
<li></li> *

这是一个非常优雅的解决方案，可能需要一些操作才能获得您想要的结果，但您肯定拥有 CSS 中的工具来完成它。

这是 CSS3 选择器及其功能的完整列表。

http://www.w3.org/TR/css3-selectors/#selectors

您可能需要四处寻找比文档中提供的示例更好的使用示例，但至少您会知道要搜索什么。

显然只有现代浏览器支持这个，但是你可以修复 IE 支持

ie9.js

http://code.google.com/p/ie7-js/

或者如果该解决方案不符合您的喜好

强烈推荐jQuery masonry之前的建议

http://masonry.desandro.com/