javascript/jqueryを使用してimages/divの位置を並べ替える最良の方法は？

Question

私はhttp://wonderwall.msn.comの出所を覗き込んで、壁のブロックが持つすべてのスパンタグがどのIDとも関連付けられていないように見えました。関連IDなしでブロック/画像の1つをクリックすると、要素のアニメーション化された再配置をどのように達成できるかは非常に不思議です。

画像をクリックしてその周りに他の画像を表示して横に移動する方法が不思議です。それは何らかの種類の公式か恋人ですか？

私は5スパン/ブロックと言い、1つをクリックし、他の人にアニメート/側面への移動をさせたいと思います。

Answer 1

IDは、JavaScript経由でオンザフライで生成されます。ソースでは表示されませんが、Firebugで調べると表示されます。

Answer 2

IDは必須ではなく、しばしば有害です。あなたはそれらを生成する必要はありません。

IDを持つページに要素を配置すると、その要素が1つだけであることを主張しています。これはまれです。より頻繁に、あなたがしたいことは、いくつかの動作をページ上のいくつかの要素に関連付けることです。その中には、多くのもの、1つまたはゼロが存在することがあります。

この場合、クリックしたときに画像を並べ替えることはほとんどありません。どのように動くべきかを計算するためのアルゴリズムはありませんが、ここではjQueryを使って同じことを達成するためのフレームワークを示します。

// create jQuery plugin for highlighting and shuffling brick dealies 
(function($){ 

    function expandify() { 
    var href = this.attr('href'); 
    // create a popup containing the href 
    return this; 
    } 

    function shuffle() { 
    this.each(function(index, elem){ 
     // calculate new position and move the element there. 
    }); 
    return this; 
    } 

    $.fn.expandify = expandify; 
    $.fn.shuffle = shuffle; 

})(jQuery); 

// attaches behaviors to elements on the page after they've loaded 
// either $.ready, or window onload, or after some ajaxing takes place 
$('.wallBrick') 
    .click(function(e){ 

    $(e.target) 
     .expandify(); 

    $('.wallBrick') 
     .not(e.target) 
     .shuffle(); 

    });