具有固定高度和水平滚动的HTML列布局 [英] HTML columns layout with fixed height and horizontal scroll
问题描述
对于一个android项目,我需要显示一个视图(WebView),它动态加载内容。
内容项目将由 JavaScript $ c $>添加的
< div class =content-item>
标签c>到< div class =content-holder>
页面加载完成后。
是这样的:
您可以遍历内容项目,检查它们是否适合列,如果它们不符合,请创建一个新列并将其余项目移动到新列......如此:
$(。content-item)。each(function(){
//迭代内容项并查看底部是否超出容器
var bottom = $(this).position()。top + $(this).height();
if ($< $ this(this)).parent()。height()){
//将其移动并将内容项移动到新列
columnShift($(this));
}
});
函数columnShift(el){
var parent = el.parent();
var container = $(。content-container);
//创建一个新列
var newCol = $(< div class ='content-holder'>< / div>);
//获取不适合的内容项并将它们移动到新列
el.nextAll(。content-item)。appendTo(newCol);
el.prependTo(newCol);
//加宽父容器
container.width(container.width()+ parent.width());
//将新列添加到DOM
parent.after(newCol);
}
with 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,包含任意数量的内容
.content-holder {
float:left ;
width:300px;
height:300px;
border:1px solid#000000;
overflow:hidden;
margin:5px;
padding:10px;
}
.content-item {
最大高度:280px;
overflow:hidden;
}
我相信你可以让代码更聪明,但这应该是一开始
For an android project, I need to show a view (WebView), that dynamically loads content.
Content items will be <div class="content-item">
tags that are added by JavaScript
to <div class="content-holder">
after page has loaded.
The design is such that:
- List item
- Content items will be layed out in fixed-width columns. Content items do not necessarily have same height.
- Height of any column must not exceed screen height. If a column is full, additional content will be put in next column(create column if necessary). There will be no empty columns. Column must not break inside a content item.
- Page shall be horizontally scrollable(many columns of fixed width), but not vertically (height does not exceed page).
Any ideas on how to implement using css, javascript?
You can iterate through the content items, check if they fit in the column, and if they don't, create a new column and move the rest of the items to the new column ... like so:
$(".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 );
}
with 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>
with an arbitrary number of .content-item divs, containing an arbitrary amount of content
and css of
.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;
}
I'm sure you can make the code more clever, but this should be a start
这篇关于具有固定高度和水平滚动的HTML列布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!