Webページの「新聞」レイアウトのアルゴリズム

この投稿は、一般的なブログを詰まらせないように、個人的なブログで特別に書かれています。



職場で問題が発生しました:おそらく写真や写真だけの記事が一定数あり、このたくさんの良いものは新聞の形式でウェブページに自動的にラップされるべきです-つまり、いくつかのコラムで、あるコラムの記事、別のコラムで-3、しかし高さは少ない。 そして、新聞の見開きのように見えるように、列にすべての写真を入力します。

なんらかの理由で、このような仕事に最初に出会ったとは信じたくありません。 これは、私がすでにアルゴリズムを大まかに想像しているという事実を否定するものではありません;)それにもかかわらず、私はすでにそのようなタスクに遭遇した人々を聞きたいです。 または、タスクを面白いと思った人だけ。 はい、誰でも、本当に=)



始めましょう。



0)ソースデータ

特定の記事/写真のセットがあるとしましょう。 各記事には画像を含めることもできます(必須ではありません)。 新聞のページの幅、たとえば1000ピクセルがあります。 また、このページを分割する列の数があります。



一般的なアイデア:

このページは「正方形」(有名な漫画のオウムの特定の類似物)に分割されています。 つまり 5つの列がある場合、列の幅は200ピクセルで、正方形の高さもそれぞれ200ピクセルです。 その結果、幅が5正方形で高さが無限大の長方形が得られます。 次に、コンテンツのサイズに関するすべてのさまざまなオプションの計算ミスがあります-たとえば、同じ記事を1x4正方形、2x2、および4x1の両方のサイズで作成できます。 面積は同じです。 ただし、次の2つの微妙な点を振り返ってください。

a)記事に写真がある場合は、サイズを変更/トリミングして、その幅を列の幅の倍数にする必要があります。その後、全体の面積を考慮します。

b)常にフォント文字の幅から開始して、テキストが占める領域を考慮する必要があります-そうしないと、あらゆる種類のハイフネーションで「四捨五入」のリスクが生じます。

その結果、すべての計算の後、固定幅の長方形に最適に内接する必要があるサイズのバリエーションを持つ要素のセットがあります-これはもはや問題ではありません。 少なくともオプションの単純な列挙=)その後、結果(ところで、複数の最適な配置があるかもしれませんが、それらのいくつかをランダムに与えることができます)はキャッシュされ、ユーザーには静的なhtmlnikが与えられますピクセル。 新しい記事/写真を受け取り次第-およびp-times、および2、3-オリジナルに! -手順を繰り返します。



要約すると、簡潔なアルゴリズム:

1.記事の領域、その中の画像、および「スタンドアロン」画像のオプションの計算。

2.場所の最適なオプションを選択します。



特に難しくはありませんが、私は(自分自身も含めて)要点を述べたいと思います。



1)単一画像

これらは、記事には含まれていませんが、単に写真です。 私の意見では、それらを使用して最も簡単な方法は、サイズを変更するか、必要な幅にトリミングすることです。高さは比例したままです。

ところで、(将来の)アイデアもあります-新聞に完全に類似したいので、(例えばdgを使用して)写真に見出しを書くことができます。 しかし、私は気を取られました、それはいつか後であり、それでも事実ではありません=)



2)フォント

フォント文字の幅を省くことができないようです-さもなければ、記事のボリュームを計算することはできません。 したがって、フォントを操作するための機能が必要です。たとえば、php execまたは.ttfファイルのパーサーによって起動されるサーバーツールは重要ではありません。 これらは実装の詳細ですが、すべてのフォント幅はベース内にある必要があります(パーサーよりも明らかに速くするため)。



3)記事内の画像

特定の領域を占有します。 これまでのところ、私は彼らが隅に押し込まれ、次にテキストを挿入し、「正方形」の総面積を考慮する必要があると考えています。 繰り返しますが、画像は異なる数の正方形に引き伸ばすことができるため、ここでもオプションを使用できます。

また、多くの画像が存在する可能性があることを忘れないでください。 この場合、私はまだ難しいと思います...私はまだ考えなければなりません。 アイデアは受け入れられます。



4)最適な場所を検索する

難しいことは何もありません-要素のすべてのオプションの場所のすべてのオプションを列挙し、実際には出来上がりです。



だから、に戻る-なぜ私はこれを書いたのか。

ヒント、トリック、その他の同様のことを聞きたいです。 その見返りに、すべての準備ができたとき(そして、そうなると確信しています)、一般向けのリンクを投稿することを約束します。

突然、同様のタスクに直面した人がいる場合-この人は私にとって金の重さの価値があります;)

とにかく...同意する、タスクは簡単ではありませんか? ;)しかし、脳は常に伸びるのが面白いです。 個人的には、私は少なくともこのプロジェクトに満足しています-私が思うなら、私は存在します=)

とにかく、このテキストをマスターしたすべての人に感謝します。 できるだけ明確に書き込もうとしましたが、成功しなかった場合は、基本的にコメントで質問に答えます。




All Articles