3

ポートフォリオ用にPinterestのようなギャラリーを作成しようとしています。単純なPHPによってフォルダ内にある画像を表示するだけで、それほど凝ったことはありません。後でライトボックス（またはそのようなもの）を取り付けます。

今のところ、画像を他の画像に対して上向きに「浮かせる」のに問題があります。魔法のように、右上の2つの画像はそれを行いますが、他の画像はそうではありません。 ここに画像の説明を入力してください

ここでライブで見ることができます。これはJSFiddleですが、画像は表示されません。

それを行う簡単な方法はありますか？それとも、これに何らかのjQueryプラグインを使用し始める必要が本当にありますか？ありがとう！

4

3 に答える 3

6

http://masonry.desandro.com/

組積造は、JQueryプラグインを配置する優れたグリッドです。おそらくそこに最高の1つ。

私は個人的にそれを使用していませんが、私の友人は次のように言って良い結果を出しました：

  • カスタマイズ可能
  • それはそれがすることのためにかなり軽量です
  • 速いです

残念ながら、JQuery（すでに比較的遅いライブラリ、または取得を開始するフレームワーク）を使用し、CPUを集中的に計算するため、既知の世界で最速ではありません。そのため、CSSハックほど高速ではありませんが、石積みが最良の選択であるかどうかは、この質問で省略されている必要なものに正確に依存します。

単純なポートフォリオタイプのものを構築している場合は、CSSハックが最善の方法ですが、さらに何かを構築している場合は、これが探しているものである可能性があります。

残念ながら、IEのようなブラウザ間でのパッチの標準により、クライアント側にかなりのリソースを配置せずにこのレイアウトを作成することは困難です（サーバー側でトリミングされた可能性のある非常に大きな画像の画像サイズ変更など）。

ovとThinkingStiffには答えがあります。サイトに入るすべての画像を特定のサイズに標準サイズ変更し、レイアウトに使用できるキャッシュ方法を使用すると、写真ページやポートフォリオ。

于 2012-06-23T23:32:00.210 に答える
6

column-count少なくとも単一の要素を含むと仮定して、CSS3でこれを行うことができます。このメソッドには、クラスを追加するだけでレイアウトを簡単に変更できるという利点があります（たとえば、モバイルデバイスの場合）。

出力：

ここに画像の説明を入力してください

デモ： http： //jsfiddle.net/ThinkingStiff/rS95S/

CSS：

#container {
    column-count: 3;
    column-fill: balance;
    column-gap: 10px;
    width: 330px;
}

.image { 
    display: block;
    margin-bottom: 10px;
    width: 100px;
}

HTML：

<div id="container">
<img class="image" src="http://farm1.staticflickr.com/205/494701000_744cc3a83a_z.jpg" />
<img class="image" src="http://farm5.staticflickr.com/4028/4287569889_f6a4fca31b_z.jpg" />
<img class="image" src="http://farm3.staticflickr.com/2340/2421926504_d8509d0a98_z.jpg" />
<img class="image" src="http://farm1.staticflickr.com/197/503792921_fedf8ba47e_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1153/741035029_f394e11a1f_z.jpg" />
<img class="image" src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd_z.jpg" />
<img class="image" src="http://farm2.staticflickr.com/1339/1157653249_dbcc93c158_z.jpg?zz=1" />
<img class="image" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_z.jpg?zz=1" />
</div>
于 2012-06-24T08:54:46.487 に答える
3

Sammayeの答えからのjQueryMasonryは機能します-トリックは、コンテンツが元の順序でDOMに追加される前に機能させることです（これはajax Webサイトではかなり些細なことです）

ただし、Masonryプラグインが過剰になる理由は1つあります。それは、コンテンツの幅が可変であるためです。ピンタレストでもポートフォリオモックアップでも、これは必要ありません。同時に、クライアント側での処理オーバーヘッドと、誤って配置されたコンテンツのフラッシュが発生します。

このシナリオでは、コンテナ<div>列を使用するだけで十分です。

.column {width:33.3%;float:left;/*should be clearfix instead*/}
.column .content {width:95%;margin:2.5%;float:left;}​

次に、コンテンツをサーバー側（画像の高さと幅を取得するのは簡単で、動的である必要があるバランスをとるだけです）またはクライアント側でコンテンツを追加する前に、コンテンツを正しい列に適用できます。

いじる

于 2012-06-24T00:16:11.520 に答える