-2

http://pinterest.com/のようなグリッド ビューでキャプション付きの写真を表示する必要があります。私がやりたいこと: http://pinterest.com/のように、いくつかの画像が異なる幅と高さで表示されています。だから私は同じことを実装したい、私の場合、画像はデータベース（mysql、php）から来ているので、すべての画像は同じサイズです。それらをグリッド ビューで表示するには、いくつかの js または jquery コードが必要ですが、サイズが異なるランダムな画像が必要です。

4

2 に答える 2

1

問題は、pInterest に 5 つの列があり、そのすべてが同じ幅であることです。画像はすべて異なる寸法であるため、すべての画像を同じ幅にサイズ変更する必要があり、これらの異なる高さの画像を持つことができます。

あなたが言うように、すべての画像の高さと幅が同じである場合、列幅が異なるとこの効果は得られません。ただし、すべての画像は、その列の他のすべての画像と同じ幅と高さになります。

次のように使用できるいくつかの gridView プラグインがあります。

これは、上で説明したさまざまな幅の例です。

pInterests の現在のビュー ここに画像の説明を入力

幅がすべて等しい場合、あなたはどのように見えるでしょうか。 ここに画像の説明を入力

さまざまな幅であなたのものがどのように見えるか ここに画像の説明を入力

于 2013-04-13T13:44:52.297 に答える
0

まず、Pinterest のようなグリッドにこれを使用します: http://masonry.desandro.com/

次に、画像 URL を使用してデータベースから配列を取得する場合は、次のコードを試してください。

//'Shuffle' the array for random order
<?php shuffle( $arrayImg ); ?>
// Iterates over the array
<?php foreach ( $arrayImg as $src ): ?>
  // Random images width between 200 and 300 with 'rand'
  // Maybe the random width is contradictory... but test it yourself =)
  <img src="images/<?php echo $src ?>" width="<?php rand(200,300) ?>">
<?php endforeach ?>
于 2013-04-13T13:43:14.633 に答える