JavaScript - Toutiaoピクチャーチャンネルのレイアウトスタイルを実装するにはどうすればよいですか?

今日のヘッドラインピクチャーチャンネルtoutiao.com/news_image

Toutiaoの画像レイアウトスタイルは次のとおりです。私がインターセプトしたのは2つだけで、ランダムなスタイル（3つの画像スタイル、1つの画像スタイル）のようです

これを実装するために PHP を使用する方法 (または、PHP を使用してさまざまなスタイルを出力する方法? 3 つの画像スタイルをいつ出力するか? 1 つの画像スタイルをいつ出力するか、またはランダムに出力するか [ランダム出力は通常、Web ページを更新すると変更されます])?

返信内容:

今日のヘッドラインピクチャーチャンネルtoutiao.com/news_image

Toutiaoの画像レイアウトスタイルは次のとおりです。私がインターセプトしたのは2つだけで、ランダムなスタイル（3つの画像スタイル、1つの画像スタイル）のようです

これを実装するために PHP を使用する方法 (または、PHP を使用してさまざまなスタイルを出力する方法? 3 つの画像スタイルをいつ出力するか? 1 つの画像スタイルをいつ出力するか、またはランダムに出力するか [ランダム出力は通常、Web ページを更新すると変更されます])?

写真は 3 つのスタイルに分かれています。.small .middle .large
各スタイルの幅と高さは固定です
3 つの写真、.middle スタイルは左側にフロート、.small スタイル 2 つは右側にフロートします
画像のレイアウトは次のとおりです

このような不規則な画像配置は、リンクが1つしかない場合は、スクリーンショットを撮って貼り付けるだけです。各ブロックにリンクがある場合は、ホットスポットを描画するだけです。