这与其说是一个 jQuery 问题,不如说是一个整体概念问题。在我的示例中,我可以使用具有以非线性方式设置的最高值的 div 填充容器。每一个的顶部值是根据一个公式计算的,该公式考虑了它左侧的顶部位置以及容器的高度(小提琴的第 33 行)。
//this formula sets the top value for each new child added to the container
//height is 100% of its parent which is 20% of the body
//newOne:last is the most recently added child and will have an initial top value of 10%
parseInt($(this).next().css('top'), 10) / $('#queue').height()) * 75 + (parseInt($('.newOne:last').css('top'), 10) * 2) + '%'
我更多地偶然发现了这一点,它似乎工作得很好,但如果优化对你来说很明显,请指出:)我遇到的麻烦是一个如何调整的优雅公式孩子们在拖动事件中顺利进行。我认为需要根据对左侧偏移的一些操作来调整顶部值,但是经过数小时的试验,我没有发现任何东西可以在我开始拖动时保持原始位置完整,并在我的过程中继续平稳地调整值拖。当我向左拖动时,孩子们应该逐渐接近 10% 的最小顶部值(左偏移为 0 的孩子将有 10% 的顶部值),并在我向右拖动时逐渐远离该顶部值回到他们的初始位置.
$('#queue').draggable({
axis: "x",
scroll: false,
drag: function(){
//adjust values of each child
$('.newOne').each(function(){
var percentLeft = $(this).offset().left / $('footer').width() * 100
var thisLeft = parseInt($(this).css('left'), 10) / $(window).width() * 100;
var thisTop = parseInt($(this).css('top'), 10) / $('#queue').height() * 100;
if (percentLeft >= 0){
//top value of each one gradually decreases...
//as it gets closer to an offset value of 0 and minimum top value of 10%
//non-linear attempt but not even close
//$(this).css('top', $(this).css('top', 10 + (thisTop - 10 / thisLeft) + '%'));
//linear step
$(this).css({'top': 8 + (percentLeft/2) + '%'});
}
});
}
});
PS我知道我在这里问了很多,但希望有人能接受挑战:)
更新: 偶然发现 exp 方法并做了这样的事情:
adjustTop = function(offset){
return 100 * (1.0-Math.min(0.98,(0.83 + ( 0.17/ (Math.exp(0.007*offset))) )) ) + '%';
};
$(this).css('top', adjustTop($(this).offset().left) );