跳过列的CSS列计数元素

Question

我正在尝试使用CSS3在5个元素中显示动态数量的元素column-count,但是当我在悬停时展开列表项高度时,它偶尔会导致跳转(元素转到下一列).

你可以在这里看到这种行为

我假设它是因为column-count使用高度来计算哪个项目去哪里或哪里......我们怎样才能让它按预期工作？

如果我尝试增加高度<ol>,它们会变成4列甚至3列,因为元素会填满第一列,然后启动第二列,依此类推.

Answer 1

简而言之,CSS3列不是您正在尝试执行的操作的正确解决方案.(如果我理解正确,你希望hovered元素通过跳出它的框来溢出它的父容器.但是,CSS3列被设计成溢出将继续在下一列的顶部,并且我无法意识到改变这种行为).

我建议使用不同的方法来实现您所需的UI,例如使用JQuery在每列之间插入包装器.

但是,如果您设置使用列计数,您可以通过执行以下操作来破解它:

的jsfiddle:

http://jsfiddle.net/p6r9P/

CSS:

ol li:nth-child(5n) {
  padding-bottom: 40px;
}

JQuery的:

function togglePadding(li, status) {
    var index = li.index();
    var target = (index % 5 === 4) ? li : li.siblings().eq(index + 3 - (index % 5));
    target.stop(true).animate({
        "padding-bottom": (status === "on") ? "40px" : 0
    });
}

$('a.song').each(function () {
    var origwidth = $(this).width();
    var origheight = $(this).height();
    $(this).hover(function () {
        togglePadding($(this).parent(), "off");
        $(this).stop(true).animate({
            width: origwidth * 2,
            height: origheight * 2
        })
    }, function () {
        $(this).stop(true).animate({
            width: origwidth,
            height: origheight
        });
        togglePadding($(this).parent(), "on");
    });
    $(this).clone(true).attr({
        "class": "song-detail"
    }).css({
        "z-index": 1,
        "background-color": "#CCC"
    }).appendTo('ol').wrap("<li></li>");
});

这只是一个粗略的演示,需要进行清理才能进行生产.基本上,策略是在每第5个元素(列的结尾)之后添加40px填充"缓冲区".当一个元素悬停时,我们会在其列的末尾找到兄弟,并将其填充设置为0.

但是你可以看到,如果你连续快速地将鼠标悬停在几个元素上,有时盒子会因为一个盒子暂时跳到下一列而发抖.CSS3列数真的想要平衡这些列.

所以我建议使用不同的方法,但随意玩,看看你是否可以使它工作.

**编辑:没有列数**的一种方法**

由于您已经在使用JQuery,因此可以将每个X元素包装在一个中<div class="col">,并将这些div用作列.

JSFiddle: http ://jsfiddle.net/QhTvH/

JQuery的:

var container;
var i = 0;
var numCols = 5;
var colCount = Math.ceil($('.songs a').length / numCols);

$('.songs a').each(function () {
    if (i % colCount === 0) {
        container = $('<div class="col"></div>').appendTo(".songs");
    }
    $(this).appendTo(container);
    i++;
});

CSS:

.songs .col {
    max-width: 18%;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
}
.songs a {
    display: block;
    margin: 10px 10px;
    background-color: #EEE;
    width: 200px;
    height: 40px;
    cursor: pointer;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

HTML:

<section class="songs">
  <a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic</a>
  <a class="song" data-src="songs/Titanic.mp3" style="width: 187px;">Titanic2</a>
  etc...
</section>