Макет столбцов HTML с фиксированной высотой и горизонтальной прокруткой

Для проекта Android мне нужно показать представление (WebView), которое динамически загружает контент. Элементы контента будут <div class="content-item"> тегами, которые будут добавлены JavaScript в <div class="content-holder"> после загрузки страницы.

Дизайн таков, что:

  • Пункт списка
  • Элементы контента будут размещены в столбцах фиксированной ширины. Элементы контента не обязательно должны иметь одинаковую высоту.
  • Высота любого столбца не должна превышать высоту экрана. Если столбец заполнен, дополнительный контент будет помещен в следующий столбец (при необходимости создайте столбец). Пустых столбцов не будет. Столбец не должен разрываться внутри элемента контента.
  • Страница должна прокручиваться горизонтально (много столбцов фиксированной ширины), но не вертикально (высота не превышает страницы).

Любые идеи о том, как реализовать с помощью css, javascript?


javascript html css fixed-width horizontal-scrolling
person Mirbek Samiev    schedule 08.07.2013    source источник
comment
Взгляните на свойства столбцов CSS: dev.w3.org/csswg/css-multicol< /а>   -  person    schedule 08.07.2013

Ответы (1)


arrow_upward
1
arrow_downward

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>

с произвольным количеством элементов div .content-item, содержащих произвольное количество контента

и 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;
}

Я уверен, что вы можете сделать код более умным, но это должно быть началом

person Dom Day    schedule 08.07.2013