CSSやJS：どのようにグリッド

Question

ではタイルのサイズを膨らませるために、私はCSSやJSに堪能しています。このプロジェクトでjQueryを使用する。私は順序付けられていないリスト（ 'li'タグ付き）で構成される流体グリッドを持っています。各「li」（タイル）は同じ幅と高さを持ちます。ブラウザが拡大または縮小すると、タイルがラップダウンまたはスペースを埋めるように上がります。

ユーザーが、私はタイルが幅2枚のタイルとタイルFOURの高さに相当大きな固定された高さと幅に拡張するタイルをクリックします。周辺のタイルは、もちろん、膨張したタイルに合わせて移動する必要があります。しかし、私はタイルが隙間のないより大きなタイルの周りを流れ続けるようにする必要があります。

タイルの最終的な構成（膨張したフローティングタイルを使用）をネイティブ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> * 

n番目-の型セレクタは、あなたは、これは非常にエレガントな解決策である、それがかかる場合があります組み合わせるマッチした要素

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

あなたはマニュアルに記載されているものよりも優れた使用例を見つけるために周りを掘る必要があるかもしれませんが、少なくともあなたは、検索するために何を知っています。

それは明らかにこれをサポートする唯一の近代的なブラウザですが、あなたは

ie9.js

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

か、そのソリューションは、あなたの空想

をつかむしない場合とIEのサポートを修正することができます

前のjQuery石積みの提案を強くお勧めします。

http://masonry.desandro.com/

Answer 2

要素の変更された状態に新しいクラスを作成して、古いクラスを削除して新しいクラスを追加しようとしましたか？いくつかのキーワードをあなたが軌道に乗るために：

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

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