1

私の質問を重複と見なさないでください。CSSで異なるサイズのDisplay divを試してもうまくいきません

上記の投稿で示唆されているように、私はMasonryを使用しました。しかし、それを機能させることができませんでした。コードイグナイターを使用しています。

ここに私が使用しているcssがあります 

#container {
    width:90%;
    margin:3% 0px 0px 10%;
}
.item {
    margin:10px 10px 10px 10px;
    float:left;
    width:240px;
    border:5px solid #f0f0f0;
    background-color:#d2dbde;
    border-radius:5px;
}

Javascript と js ファイル

<!-- include js files -->
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#container').masonry({
        // options
        itemSelector : '.item'
    });
});
</script>

コンテンツ

<div id="container">
    <div class="item">
        <div id="usericon" style="width:240px;height:30px;">
        <!-- content -->
        </div>
        <div id="name">
        <!-- content -->
        </div>
    <div>
    <a href="<?php echo $link; ?>">
        <img src="<?php echo $picture = ($picture == null) ? '' : $picture; ?>" width="240px" height="auto">
    </a>
</div>

divセクションに画像、名前、日付などを表示しています

4

1 に答える 1

6

代わりに配置された動的 div

JsFiddle - デモ(列の数はドキュメントウィンドウの幅によって異なります)。

通常の幅の div があるように見えるので、次のようにしてみてください。

注: この単純なデモ スクリプトで最初に回答して以来、リンクされた jsFiddle デモを大幅に変更しました。このコードはほとんど似ていませんが、基本はほとんど同じです。

CSSはこんな感じ

div.column {
    display:inline-block; /* "Columns" should be only as wide as their setting, */
    vertical-align:top;   /* should sit next to each other horizontally, */
    width:240px;          /* and be vertically aligned. */
    height:auto;
    margin:10px 0px 10px 10px;
}
div.column div.row {
    width:240px;          /* All "row" divs are of the same width, */
    height:auto;          /* but of varying heights */
    margin:0px 0px 10px 0px;
    padding:0px;
    background-color:#00f0f0;
}

JavaScriptはこんな感じ

(function () {
    var tdw = 240 + 0 + 10; // Div width + margin-left + margin-right
    window.addEventListener("load", function () {
        var ww = window.innerWidth, // how much width to play with?
            cn = Math.floor(ww / tdw), // how many columns will fit?
            cdl = [], // memory
            lc = 0, // alternation
            c = 0, // iteration
            ncd; // element object
        while (c++ < cn) {
            ncd = document.createElement("div"); // create columns
            ncd.setAttribute("class", "column"); // set their class
            document.body.appendChild(ncd); // add to page
            cdl.push(ncd); // remember them
        }
        c = 0;
        while (c++ < 100) { // this for demo // loop until there're no more
            ncd = document.createElement("div"); // create your divs
                // this could be where you add your div content
            ncd.setAttribute("class", "row"); // set their class
            lc = lc < cdl.length ? lc : 0; // alternate column as parent
            cdl[lc++].appendChild(ncd); // add the div to the column
            ncd.style.height = (200 * Math.random()) + "px"; // this for demo
                // or you could add the content via innerHTML
        }
    }, false);
}());​

この答えは、多くのことを想定しながらまとめられました。質問の詳細があれば、より完全な回答を提供できたはずです。

説明を求められたので...

私が質問を理解しているように、それは動的情報（無関係な場所から抽出されたもの）を取得し、それでdivを埋める方法を見つけることです。これらの各 div は、ページ上(おそらく「フィード」コンテナー内など) に列で設定されます。これらの幅 (「infodiv」と呼びましょう) の infodiv は幅が設定されているため、固定幅の列を作成してそれらを含めることができます。これで、div は自由に必要な高さにすることができ (含まれる情報に従って)、parent 内で単純に重なり合いますdiv.column。

ページload上で (オフセットなどを考慮したライブ バージョンで) 利用可能な幅を測定し、水平方向に収まる列数を計算してから、それらの列を作成します。DOM の読み取りと再読み取りを節約するために、後で簡単に検索できるように列を配列に格納できます。

列を作成した後、動的に作成された infodiv を列に自由に追加し、列ルックアップ配列を循環させ、新しい各 infodiv に対して各プログレッシブ列 (画面の左から右) を利用します。最後の列に到達したら、ルックアップ カウンターをゼロに戻し、infodiv の読み込みを続けます。

この方法では、各列にほぼ等しい数の情報 div が入力されます (数学に依存します)。ただし、各 infodiv の高さはチェックされないため、どの列も他の列よりもはるかに長いコンテンツになる可能性があります。これを回避するには、新しい infodiv が作成されるたびに各列の高さを測定し、その infodiv を最も短い列に追加します。これにより、列の高さがほぼ同じになります。

注: この回答に接続されているデモ jsFiddle には、infodiv の作成時に列の高さを動的に測定する基本的な関数が含まれています。列の高さを正確に読み取るために、各画像にonloadは次の infodiv の作成をトリガーする一時的なリスナーがアタッチされています。リスナーは、リソースを解放する仕事が完了するとすぐに削除されます。この方法は全体的なページの読み込みを遅くしますが、実用的でないほどではありません。実際の状況によっては、より高速で精度の低い読み込みの方が望ましい場合があります。その場合、イメージのonloadリスナーを破棄し、以前に作成されたものの状態に関係なく、必要に応じて infodiv を作成します。

動的測定に加えて: 大量のデータや画像 (特に画像) のonscroll読み込みは、訪問者が目的に向かってスクロールしている場合にのみ、新しいデータ (この場合は infodiv) を読み込む関数をトリガーするリスナーを追加することで改善できます。彼らがすでに見ているものの終わり。これにより、サーバーのストレスが軽減され、ブラウザーの応答が向上します。加えて、訪問者が決してスクロールして見ることのないものを読み込んでも意味がありません。

したがって、疑似用語でのコードは次のようになります。

画面の幅は？
(画面幅を列幅で割った) 列を作成します。
新しい infodiv が作成されている間に、それらを列に追加します。
すべてを 1 つの列に追加するのではなく、均等に共有します。

最終結果は、動的に作成された、幅が同じで高さが異なる情報の div であり、列化された方法でレイアウトされます。それらの自然な傾向は、親のできるだけ高い位置にあるため、常にその上の infodiv のすぐ下に座っています。

列の表示プロパティが に設定されているため、列inlineはスペースがあれば横に並んで配置される傾向があります。列の親の幅が (初期レイアウトが作成された後に) 縮小されると、最も右の列が他の列の下に押し出されることに注意してください。

PHPに関しては - それは別の話です:-)

于 2012-12-11T03:21:01.867 に答える