jquery - 当列表项超过 UL 高度时，按高度划分列表项

Question

我正在尝试从动态内容创建幻灯片。基本上我想做的是假设我有一个 <ul>这是 300x100。我 float 列表项，当列表项超过 <ul> 的高度时.我想将这些列表项包装在一个 div 中，以便我可以将 x 个列表项除以高度。

我正在尝试这样的事情，但我不知道我是否朝着正确的方向前进或从这里去哪里。

CSS:

<style>
    ul {
        height: 100px;
        width: 300px;
    }

    ul li {
        float: left;
    }
</style

HTML:

    <ul>
        <li>first</li>
        <li>ffgggfs</li>
        <li>sffsfsf</li>
        <li>jgjghjgfj</li>
        <li>trtretert</li>
        <li>ghhfhfhgf</li>
        <li>sdfsdfsdf</li>
        <li>fghjjh</li>
        <li>iuyuiy</li>
        <li>cvcvc</li>
        <li>hgjhjg</li>
        <li>tryryre</li>
        <li>kkhjkhjk</li>
        <li>sdfsdfsdf</li>
        <li>khjkhjk</li>
        <li>adfsfafsaf</li>
        <li>syuuyuyu</li>
        <li>sweeerre</li>
        <li>last</li>
    </ul>

jQuery:

<script>
var sumHeight = 0;


$('ul li').filter(function() {

    var $this = $(this),
        pHeight = $this.parent().height();      // parent inner height

    sumHeight += $this.outerHeight(true);       // + block outer height

    return sumHeight < pHeight;
}).insertAfter('ul').wrapAll('<div></div>');

Answer 1

好吧，我没有给你确切的要求，但可以根据你的需要进行修改。

在此FIDDLE我使用 div 而不是 ul/li，我认为它们可以按照您想要的任何方式设置样式。

有一个 holder div，其中为每个单独的 div 添加了 holder。 通过更改 maxheight，您可以控制每张“幻灯片”中的行数。

var maxheight = 100;
var divlistnum = 0;

$('.holder').append("<div class='" + "slidelist" + divlistnum + "'></div>");

$('#clickme').click(function(){
    $(".slidelist" + divlistnum ).append("<div class='littlelist'>Stuff to Add</div>");

    if( $(".slidelist" + divlistnum).height() > maxheight )
      {
       divlistnum = divlistnum + 1;
       $('.holder').append("<div class='" + "slidelist" + divlistnum + "'></div>");  
       }
});