Javascript 具有固定高度和水平滚动的HTML列布局
对于android项目,我需要显示一个动态加载内容的视图(WebView)。 内容项将是Javascript 具有固定高度和水平滚动的HTML列布局,javascript,html,css,horizontal-scrolling,fixed-width,Javascript,Html,Css,Horizontal Scrolling,Fixed Width,对于android项目,我需要显示一个动态加载内容的视图(WebView)。 内容项将是标记,在页面加载后由JavaScript添加到 设计如下: 列表项 内容项将以固定宽度的列进行布局。内容项不一定具有相同的高度。 任何列的高度不得超过屏幕高度。如果某列已满,则其他内容将放在下一列中(如有必要,请创建列)。将不会有空列。列不能在内容项内断开。 页面应可水平滚动(多栏固定宽度),但不能垂直滚动(高度不超过页面) 有没有关于如何使用css、javascript实现的想法? 您可以遍历内容项,检
标记,在页面加载后由JavaScript
添加到
设计如下:- 列表项
- 内容项将以固定宽度的列进行布局。内容项不一定具有相同的高度。
- 任何列的高度不得超过屏幕高度。如果某列已满,则其他内容将放在下一列中(如有必要,请创建列)。将不会有空列。列不能在内容项内断开。
- 页面应可水平滚动(多栏固定宽度),但不能垂直滚动(高度不超过页面)
$(".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 );
}
我相信您可以使代码更聪明,但这应该是一个开始看看CSS列属性:
<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-holder {
float: left;
width: 300px;
height: 300px;
border: 1px solid #000000;
overflow: hidden;
margin: 5px;
padding: 10px;
}
.content-item {
max-height: 280px;
overflow: hidden;
}