Question

第一个问题。希望这不是重复。

我有一个无序的缩略图列表显示为内联块。所有图像都排列在一个漂亮，干净的网格中。但是，根据其包装器的大小，列数和行数可能会有所不同。我有数据会在悬停时弹出图像（有延迟）。数据显示在缩略图的下方和右侧。但这意味着如果图像位于最右侧，数据可以显示在页面外。我想知道是否有办法通过jquery确定行号或列号，所以我可以让两端的元素正确显示细节。

如果没有，我认为我可以使用它们的边距和包装器的内部宽度来获取列表元素的外部宽度。我将包装器除以list元素，然后我将获得每行的最大列表元素数！然后我可以通过各种javascript魔法手段找到行边缘的元素。但是，这并不总是有效。

例如，我之前的测试有150px方形缩略图，边距为2px。包装纸的内部宽度为937.937 / 154 = 6.0844。顺便说一句，这些数字是jquery的数字。但是，行使用5列进行渲染。将我的边距降低到1使我的宽度为152px，这样我就可以获得每行6张图像（6.164）。我可以很好地为我的目标制作一个插件，但这个小怪癖困扰着我。

任何想法或建议？

顺便说一句，这是在Chrome和Firefox中测试过的。

Answer 1

我想如果没有至少50个代表我就无法评论......所以我会在这里发帖。

正如 + Kevin B 所说，以及我同意的人，一个可能的解决方案是找到作为弹出窗口的父级的obj的位置。将该位置与页面宽度进行比较，如果它小于弹出窗口的宽度，则将弹出窗口向左移动以进行补偿。例如：

<style>
#parent { width: 200px; float:right }
#popup { width: 100px; }
</style>

<script>
    $(document).ready(function () {
        var parentRight = $("#parent").position().right;
        var windowRight = $(window).width();

        var width = windowRight - parentRight;
        if ($("#popup").width() < width) {
            //display popup
        }
        else {
            var offset = $("#popup").width() - width;
            var newLeft = $("#popup").position().left - offset;
            //display popup
            $("#popup").css('left', newLeft);
        }
    });
</script>

<div id="popup" />
<div id="parent" />

使用列表元素确定列或行计数为inline-block + division quirk

1 个答案: