CSS и JS: как накачать размер плитки в сетке

Question

Свободно владею CSS и JS.Использование jQuery в этом проекте.У меня есть жидкая сетка, которая состоит из неупорядоченного списка (с тегами 'li').Каждый 'li' (плитка) имеет одинаковую ширину и высоту.Когда браузер расширяется или сжимается, плитки увеличиваются или уменьшаются, чтобы заполнить пространство.

Когда пользователь щелкает плитку, я хочу, чтобы плитка расширялась до большей фиксированной высоты и ширины, эквивалентной ДВЕ ширине плитки и ЧЕТЫРЕМ высоты плитки.Окружающие плитки, конечно, должны сдвинуться, чтобы соответствовать накачанной плитке.Но мне нужно, чтобы плитки продолжали обтекать эту теперь большую плитку без пропусков.

Мне интересно, можно ли получить окончательную композицию плиток (с накаченной, плавающей плиткой) с помощью собственного CSS илиесли мне нужно написать Javascript, чтобы помочь расположить плитки вокруг надутой.

Answer 1

Лучший способ, о котором я могу подумать, - это добавить класс к выбранному li и использовать псевдоселекторы CSS3 для применения и очистки поплавков в зависимости от положения.

например.

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

http://masonry.desandro.com/

Answer 2

Вы пытались создать новый класс для измененного состояния элемента и использовать jQuery для удаления старого класса и добавления нового?Некоторые ключевые слова, чтобы начать работу:

.removeClass()
li.oldandbusted {
width:100px;
height:100px;
}

.addClass();
li.newhotness {
width:500px;
height:500px;
}