0

Android プロジェクトの場合、コンテンツを動的にロードするビュー (WebView) を表示する必要があります。コンテンツ アイテムは、ページが読み込まれた後に<div class="content-item">によって追加されるタグになります。JavaScript<div class="content-holder">

設計は次のようになります。

  • リスト項目
  • コンテンツ アイテムは固定幅の列に配置されます。コンテンツ アイテムは必ずしも同じ高さではありません。
  • 列の高さは画面の高さを超えてはなりません。列がいっぱいの場合は、追加のコンテンツが次の列に配置されます (必要に応じて列を作成します)。空の列はありません。コンテンツ アイテム内で列を分割してはなりません。
  • ページは水平方向にスクロール可能 (固定幅の多数の列) である必要がありますが、垂直方向にはスクロールできません (高さがページを超えない)。

css、javascriptを使用して実装する方法についてのアイデアはありますか?

4

1 に答える 1

1

http://jsfiddle.net/B4RPJ/

コンテンツ項目を繰り返し処理し、それらが列に収まるかどうかを確認し、収まらない場合は、新しい列を作成して残りの項目を新しい列に移動できます...次のように:

$(".content-item").each( function() {
    // iterate the content items and see if the bottom is out of the container
     var bottom = $(this).position().top + $(this).height();
    if ( bottom > $(this).parent().height() ) {
        // shift it and following content items to new column
        columnShift( $(this) );
    }
} );

function columnShift( el ) {
    var parent = el.parent();
    var container = $(".content-container");

    // create a new column
    var newCol = $("<div class='content-holder'></div>");

    // get the content items that don't fit and move them to new column
    el.nextAll(".content-item").appendTo( newCol );
    el.prependTo( newCol );

    // widen the parent container
    container.width( container.width() + parent.width() );

    // add the new column to the DOM
    parent.after( newCol );
}

htmlで

<div class="content-container">
    <div class="content-holder">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
    </div>
</div>

任意の量のコンテンツを含む、任意の数の .content-item div を使用

とcss

.content-holder {
    float: left;
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    overflow: hidden;
    margin: 5px;
    padding: 10px;
}

.content-item {
    max-height: 280px;
    overflow: hidden;
}

コードをもっと賢くすることができると確信していますが、これは出発点であるべきです

于 2013-07-08T04:59:03.287 に答える