当列表项超过UL高度时，将列表项除以高度

Question

我正在尝试从动态内容创建幻灯片。基本上，我想做的是假设我有一个300x100的<ul>。我浮动列表项，当列表项超过<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，我认为它们可以按照您想要的任何方式进行样式设置。

有一个holderdiv，其中为每个单独的div添加了holder。通过更改最大高度，您可以控制每个"幻灯片"的行数。

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>");  
}
});