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 回答