计算div的高度和宽度，并将其与窗口高度和宽度相关联

Question

我正在设置一个库，该库将包含一定数量的列，并且每列都将拥有不同数量的元素。逻辑是将鼠标悬停在窗口的宽度和高度周围，并能够查看相对于高度和宽度的包含div。我已经设法获得了元素的动态宽度，并成功地将div调整为每个列都可见——正如您在这里看到的那样https://jsfiddle.net/x66zqwaa/（jquery在下面）。我不明白的是，在水平方向上，我可以成功地查看每个元素，但在垂直方向上，一些div被切断了，它的行为与水平方向不同。如果有人能帮忙，我将不胜感激！

$(document).ready(function() {
var winW = $(window).width(),
  winH = $(window).height(),
  winWHalf = winW / 2,
  winHHalf = winH / 2,
  $cont = $(".content"),
  contW = $cont.width(),
  contH = $cont.height(),
  diffX = (winW - contW) /2,
  diffY = (winH - contH) /2;
var finalX = 0,
    finalY = 0;
var moveContent = function(e) {
var x = e.pageX,
    y = e.pageY;
finalX = ((x) * (contW / winW) / 2);
finalY = ((y) * (contH / winH) / 2);
console.log(finalX, finalY);
  $cont.css("transform", "translate3D(" + (0 - finalX) + "px, " + (0 - finalY) + "px, 0)");
}; $(document).ready(function() {
var winW = $(window).width(),
  winH = $(window).height(),
  winWHalf = winW / 2,
  winHHalf = winH / 2,
  $cont = $(".content"),
  contW = $cont.width(),
  contH = $cont.height(),
  diffX = (winW - contW) /2,
  diffY = (winH - contH) /2;
var finalX = 0,
    finalY = 0;
var moveContent = function(e) {
var x = e.pageX,
    y = e.pageY;
finalX = ((x) * (contW / winW) / 2);
finalY = ((y) * (contH / winH) / 2);
console.log(finalX, finalY);
  $cont.css("transform", "translate3D(" + (0 - finalX) + "px, " + (0 - finalY) + "px, 0)");
};

抱歉，但由于某些原因，我无法发布完整的代码。请看小提琴。

Answer 1

您正在基于$(".content")计算width和height。您需要使用$(window)或$(document)。对于height，您可能希望使用更大的值，以确保填充屏幕。