Question

我有一个div，我想根据div的大小和形状，图标的大小和数量来动态排列图标。我开始编写一些代码将第一个图标放在div的中心，然后我计划将其余的相对于第一个图标进行排列。

此时，我只想让中心的第一个图标发挥作用。我可以让它在初始页面加载时工作，但是当我改变屏幕的方向时，它不再是中心。

我尝试为＆＃34; orientationchange＆＃34;添加一个监听器。并再次调用我的arrangeIcons（）函数，但它不起作用。我还尝试调用我的arrangeIcons（）函数延迟，以防它在div上更新offset属性之前被调用。

我在div上有一个边框，用于在方向更改时验证它是否正在调整大小。

我不想重新加载整个页面，只需重写div的内容。

我希望这是有道理的。

我在下面包含了我的css和js。

JS

$( document ).ready(function() {

  // call arrangeIcons() after page loads to
  // arrange them on the screen
  arrangeIcons();

  // when orientation changes, call arrangeIcons()
  // again to re-arrange the icons -- NOT WORKING
  $(window).on("orientationchange", function() {
    alert(screen.orientation);
    arrangeIcons();
  });

  // Find the center of the div and arrange the
  // icons based off of it
  function arrangeIcons() {

    // leftCoord is the "top" property plus half the width of the div
    // minus half the width of the icon
    var leftCoord = 
        ($('.icon-holder').offset()["top"] + 
        ($('.icon-holder').width()*.5)) - 
        $('.dev-icons').width()*.5;

    // topCoord is the "left" property plus half the height of the div
    // minus half the height of the icon
    var topCoord = 
        ($('.icon-holder').offset()["left"] +
         $('.icon-holder').height()*.5) - 
         $('.dev-icons').height()*.5;

    // set the offset of the icon
    $('.dev-icons').offset({
      "top" : topCoord,
      "left" : leftCoord
    });
  }
});

CSS

.dev-icons {
  font-size: 5vw;
}

.icon-holder {
  border: solid 1vw;
  height: 200vw;
  max-height: 300px;
}

以下是我工作的笔的链接：http://codepen.io/RaneWrites/full/zZdaMb/

方向更改时更改元素的偏移量（jQuery / CSS）

0 个答案: