Question

我想创建一个包含可变数量LI元素的UL列表。我希望容器的高度最大为500px。这意味着如果我有更多的li元素超过500px高度我希望它变成2列。如果有更多，那么可以适合2列，我希望它变成3列。我有足够的空间来修复最多5列，数据永远不会超过这个数量。

知道我怎么能这样做吗？任何jquery，css技巧？或者我是否需要处理每个方案服务器端来执行此操作。

Example 1

    list entry    list entry 
    list entry    list entry
    list entry    list entry
    list entry    list entry
    list entry    


 Example 2
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry
    list entry    list entry
    list entry    list entry


 Example 3
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry     list entry
    list entry    list entry     list entry
    list entry    list entry     list entry

如果没有一个UL就无法实现，那么我对此持开放态度。

谢谢！

Answer 1

http://jsfiddle.net/eaewX/1/

如果您将每个列表封装在<div>中，在columns上设置column-width，column-count或<div>，则会将列表分成适当的列

编辑：它在jsfiddle中，但我应该澄清一下，你现在需要对这些属性使用浏览器扩展，即-webkit-，-moz-，-o-

供参考：

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

http://dev.w3.org/csswg/css3-multicol/#columns

Answer 2

这是一个有效的解决方案

/* set max height of containers */
var maxHt=500;/* may need to adjust based on css*/

var $list=$('#startList')
var $container=$list.parent();

var $li=$list.find('li');

var totHt=0;    
var totItems=$li.length;
$li.each(function( idx){

    var ht=$(this).height();
    if( totHt + ht >= maxHt || idx==totItems-1){
        $('<ul>').append( $(this).prevAll().andSelf() ).appendTo( $container );
        totHt=0;
    }else{
        totHt += ht;
    }  

});

$list.remove()

DEMO：http://jsfiddle.net/rzw64/3/

请注意，在UL上设置的高度需要比用于计算的最大高度稍微多一点。其他CSS将有助于或可以添加代码以获得父容器的动态高度以设置maxHt允许

一个UL列表拆分为具有固定高度的多列

2 个答案: