CSS列计数元素跳过列 [英] CSS column-count elements jumping across columns

问题描述

我想使用CSS3 column-count 获得一个动态量的元素来显示5个元素，但是当我在悬停时展开列表项高度偶尔会导致跳跃（一个元素进入下一列）。

I'm trying to get a dynamic amount of elements to show across 5 elements using CSS3 column-count, but when I expand the list item heights on hover, it occasionally causes jumping (an element going to the next column).

您可以看到这里

我假设是因为 column-count

如果我尝试增加<$ c的高度， $ c>< ol> ，它们变成4列甚至3列，因为元素填充第一列，然后开始第二列，依此类推。

If I try to increase the height of <ol>, they become 4 columns or even 3 columns because the elements fill up the first column, then start the 2nd column, and so on.

推荐答案

总之，CSS3列不是你想要做的正确的解决方案。 （如果我理解正确，你希望hovered元素通过超出其父框架溢出它的父容器。但是，CSS3列被设计为溢出将继续在下一列的顶部，我没有意识到

In short, CSS3 columns are not the right solution for what you are trying to do. (If I understand correctly, you want the hovered element to overflow its parent container by going outside its box. However, CSS3 columns are designed such that overflow will continue at the top of the next column, and there's no way that I'm aware of to change this behavior).

我建议使用不同的方法来实现你之前的UI，例如使用JQuery在每个列周围插入包装器。

I would recommend using a different approach to achieve the UI you're after, such as using JQuery to insert wrappers around each column.

但是，如果您使用列计数，则可以通过执行以下操作来破解：

However, if you're set on using column-count, you may be able to hack it by doing something like this:

JSFiddle：

http：/ /jsfiddle.net/p6r9P/

CSS ：

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

JQuery： b

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个元素（列的结尾）之后添加一个40像素的填充缓冲区。当一个元素被悬停时，我们在其列的末尾找到同级，并将它的填充动画变为0。

This is just a rough demo and would need to be cleaned up for production. Basically the strategy is to add a 40px padding "buffer" after every 5th element (the end of a column). When an element is hovered, we find the sibling at the end of its column and animate its padding to 0.

但是你可以看到，元素快速连续，有时候盒子会颤抖，因为一个盒子暂时跳到下一列。 CSS3列数真的想平衡这些列。

But you can see that if you run your mouse over several elements quickly in succession, sometimes the boxes will shudder as one box temporarily jumps up to the next column. CSS3 column-count REALLY wants to balance those columns.

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

So I would recommend using a different approach, but feel free to play with that and see if you can get it working.

** EDIT：一种无列计数的方法**

由于您已在使用JQuery，因此您可以将它包装在< div class =col> 中的每个X元素，并将这些div您的列。

Since you're already using JQuery, you could have it wrap every X elements in a <div class="col">, and use those divs as your columns.

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： b

<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>

这篇关于CSS列计数元素跳过列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！