确定列表元素作为内联块的列数或行数一个部门的怪癖

Question

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

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

如果没有，我想我可以获取列表元素的外部宽度及其边距和包装器的内部宽度。我将包装器除以列表元素，然后得到每行列表元素的最大数量！然后我可以通过 JavaScript 魔法的各种方式找到行边缘的元素。然而，这并不总是有效。

例如，我之前的测试有 150 像素的方形缩略图，边距为 2 像素。包装纸的内部宽度为 937. 937 / 154 = 6.0844。顺便说一句，这些数字是直接从 jquery 中得出的。然而，行是用 5 列呈现的。将边距降至 1，使宽度为 152 像素，这样我就可以每行获得 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" />