CSS column-count elements jumping across columns

Question

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 occasion

Answer 1

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

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:

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

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.

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: One way to do it without column-count**

Since you're already using JQuery, you could have it wrap every X elements in a

, 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 = $('
').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:

  Titanic
  Titanic2
  etc...

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...