轻量级 Javascript 响应式定位库

Question

我正在寻找一个响应式定位库，可以轻松地将许多元素放置在 HTML 幻灯片上的不同位置。有时元素需要水平或垂直对齐，一般对齐需要相对于另一个元素，

有时我希望将对齐设置为距面板左侧 30px 或距面板底线 25% 的位置。

我需要的不仅仅是垂直居中，我们需要灵活定位多个项目，以便它们相对于父元素或兄弟元素保持成比例，并且它可以在响应式容器内工作，以便可以在移动设备上查看手机或桌面

我的一个团队成员编写了一些代码来定位响应式幻灯片中的各种元素，幻灯片适用于不同的设备。

function CalculatePosition(slide) {
    var body = $(slide).find('.bodySection');
    var playBtn = $(slide).find('.playButton');
    var skipBtn = $(slide).find('.skipButton');
    var videoContainer = $(slide).find('.video-container');
    var ytPlayer = $(slide).find('#ytplayer');
    var middle = $(slide).find('.middle');
    if (playBtn.length>0)
        $(playBtn).css({ marginTop: ($(body).height() - $(playBtn).height()) / 2 + "px", marginLeft: "-" + $(playBtn).width() / 2 + "px" });
    if (videoContainer > 0)
        $(videoContainer).css({ marginTop: ($(window).height() - $(ytPlayer).height()) / 2 + "px" });
    if (skipBtn > 0)
        $(skipBtn).css({ top: $(ytPlayer).height() / 2 + "px", marginTop: "-" + $(skipBtn).height() / 2 + "px" });
    if (middle > 0)
        $(middle).css({ paddingTop: ($(body).height() - $(middle).height()) / 2 + "px" });
}

我已经四处寻找可以使这更清洁的库？

我会对做这种事情的轻量级库感兴趣。

 $(playBtn).verticalCenterTo($(body));
// or
$(body).verticalCenter($(playBtn));

或使用属性表示法实现相同功能的库

<div class='bodySection'>
   <span class='playButton' align-relative-to='bodySection' align-type='vertical-center' />
   <span class='stopButton' align-relative-to='playButton' align-position='right 20px' />
</div>

Answer 1

如果您只需要垂直定位，为什么不使用纯 CSS 解决方案，例如显示：table-cell 技术在这里描述：http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php

如果您需要以不同的父母为中心，您可以使用类切换来获得所需的效果。这比使用 JS 计算要快得多。

不确定这是否能满足您的所有需求。如果我误解了您的问题，请发表评论。