4

私はちょうどこのようなサムネイル ギャラリーを作成中です ( http://tmv.proto.jp/#!/destroyftw )。現在、スクリプトの理論を解明しようとしています。ウェブページの実際のスクリプトはこちら ( http://tmv.proto.jp/tmv_v3.js ) です。私はJavaScriptに比較的慣れていないので、これは私にいくつかの不満を引き起こしました.

masonry や isotope などのプラグインを使用してみましたが、大量の画像を処理できません。言うまでもなく、必要なフィルタリングでは無限スクロールが機能しません。そこで、自分でコーディングしてみることにしました。

ユーザーが送信した画像は、設定された幅のサムネイルにサイズ変更されます (もちろん、高さは縦横比を維持するためにスケーリングされます)。次に、それらのサムネイルを使用してギャラリーを作成します。私が抱えている問題は、レイアウトが少し難しいことです。

最初の「行」を形成するために、ページが最初に列に分割されているように見えます。その後、サムネイルは最も左にある最も短い列に配置されます (具体的には、この特定の画像配置手法の背後にある理論を知りたいです)。 例: 数字は画像の ID としても理解できます。(id="i_1",id="i_2"など...)

レイアウト例

これにより、ページがオンロードされ、新しい画像が追加されたときにカスケード フェードイン効果が発生します (ID に従って単純にフェードインします)。上記のスクリプト ページを参照として使用しようとしましたが、役に立ちませんでした。しかし、誰かが自分で確認したい場合は、サムネイルの配置に関与していると思われる機能が「ViewManager」の下にあります。

繰り返しますが、私は自分の仕事をしてくれる人を探しているわけではありません。理論を理解するのに助けが必要なだけなので、どこかから始めることができます。

**Note**(In the script): cellSize= 100; cellMargin=1; doubleSize=201 (cellSize*2+cellMargin); totalCellSize=101 (cellSize+cellMargin);
4

2 に答える 2

12

見て

var fixedwidth = 50 + 1, //the +1 is for 1px horizontal margin
    gallery = $('#gallery'), // cache a reference to our container
    imagelist = gallery.children(); // cache a reference to our image list


function layoutImages(){
    var columncount = parseInt(gallery.width()/fixedwidth,10),  // find how many columns fit in container
        columns = [];

    for (var i =0;i<columncount;i++){ // initialize columns (0 height for each)
        columns.push(0);
    }

    imagelist.each(function(i,image){
         var min = Math.min.apply(null, columns), // find height of shortest column
             index = columns.indexOf(min), // find column number with the min height
             x = index*fixedwidth; // calculate horizontal position of current image based on column it belongs

        columns[index] += image.height +1; //calculate new height of column (+1 for 1px vertical margin)
        $(image).css({left:x, top:min}).delay(i*200).animate({opacity:1},100); // assign new position to image and show it
    });
}

$(window).resize(layoutImages).trigger('resize');

http://jsfiddle.net/gaby/DL8Vr/6/のデモ

仮定

  • 画像ごとに 50 ピクセルの固定幅 (変数によってパラメーター化fixedwidth)
  • すべての画像は共通のコンテナにあります (この場合は id 付きgallery)

デモにはいくつかの CSS アニメーションがあり、ウィンドウのサイズが変更されると画像の位置も変更されます。

デモ html

<div id="gallery">
    <img src="http://dummyimage.com/50x42/7c6c4c/000000.gif&amp;text=img0">
    <img src="http://dummyimage.com/50x89/2c6c2c/000000.gif&amp;text=img1">
    ....
    <img src="http://dummyimage.com/50x62/2c5c6c/000000.gif&amp;text=img29">
    <img src="http://dummyimage.com/50x58/2c3c9c/000000.gif&amp;text=img30">
</div>

デモCSS

#gallery{
    position:relative;
    width:100%;
}
#gallery img{
    position:absolute;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    transition:all 1s;
    opacity:0;
}
于 2012-11-22T23:48:40.317 に答える
2

このテクニックは、あなたが説明したとおりに機能します。

fill the first (from the left or right, doesn't matter) shortest column

最初の最短を見つけることに関する部分は、同じ長さの列がいくつかあり、それらすべてが最短である場合のタイブレーカーとして必要です。

最短のものを最初に埋めるという部分は明らかです。そうしないと、空白の空白がランダムに蓄積されます。

列が必要な理由を理解するには、まず<img>タグが HTML でどのように機能するかを理解する必要があります。

<img>タグ_

当初から、HTML はテキストをフォーマットする方法であると考えられていました。そのため、画像が導入されたとき、派手なレイアウトなしでテキストとインラインで配置されるように設計されていました (css を使用すると、派手なレイアウトを行うことができます)。画像の高さは、常にテキスト行を占めます。たとえば、次のようになります。

<pre>
  text text text
  text <img> text
  text text text
</pre>

最終的には次のようになります。

text text text
     .------.
     | img  |
     |      |
text '______' text
text text text

画像に合わせて 2 番目の線の高さが自動的に増加することに注意してください。

画像ギャラリーのレイアウトの問題と解決策

したがって、次のような高さの異なる一連の画像タグ:

<pre>
    <img> <img> <img>
    <img> <img> <img>
    <img> <img> <img>
</pre>

次のようになります。

 ______
|      |           ______
|      |  ______  |      |
|      | |      | |      |
'______' '______' '______'
          ______
 ______  |      |  ______
|      | |      | |      |
|      | |      | |      |
'______' '______' '______'
                   ______
 ______           |      |
|      |  ______  |      |
|      | |      | |      |
'______' '______' '______'

..空白の醜いギャップがあります。

これに対する 1 つの解決策は、CSS フロートを使用することです。しかし、経験豊富な開発者は、私が "float" と "css" という単語を一緒に入力したことを認識し、複数の float を互いにうまく機能させようとする悪夢を思い出すでしょう。

もう 1 つの解決策 (私がよく使用する方法) は、画像の幅ではなく高さを固定し、画像が正常に流れるようにすることです。これにより、多くの場合、次のようなレイアウトになります。

 _______   _______   ______
|       | |       | |      |
|       | |       | |      |
'_______' '_______' '______'
 ______   ____   ________
|      | |    | |        |
|      | |    | |        |
'______' '____' '________'
 _____   ______   ___________
|     | |      | |           |
|     | |      | |           |
'_____' '______' '___________'

多くの空白のギャップを取り除くので、これははるかに優れています. しかし、これに関する問題は、ギャラリーの右端がでこぼこしていることです。これを好まない人もいます。

カラムソリューション

これは、あなたが遭遇した解決策に私たちを導きます. <div>s やsなどの HTML 要素を使用<table>して画像を列にグループ化し、上記のアルゴリズムを使用して画像を列に配置します。あなたはまだ不均一なエッジで終わるでしょうが、少なくともそれは一部の人々にとって好ましいギャラリーの一番下にあります.

于 2012-11-22T20:39:03.763 に答える