0

我想根据菜单窗口的宽度计算图标的数量，例如 50px。所以我开始： 

$(window).width();

在加载具有文档就绪功能的页面时，将给出宽度。好的！

现在我会在调整窗口大小时计算正确数量的图标。

$(window).resize(function() { //resize just happened, pixels changed });

任务

  1. 窗口的初始宽度 -> 如果用户没有调整窗口大小
  2. 窗口的可变宽度 -> 如果用户正在调整窗口大小

每个任务都在运行，但我没有把它放在一起。

你能帮帮我吗-> THX !!

如何计算具有窗口初始宽度并调整窗口大小的图标数量？

我的开始：

var activeItemcount; 

                checkWidth();
                $(window).resize(checkWidth);

                   function checkWidth() {
                        windowSize = $(window).width();
                      //   console.log(windowSize); 

                        var activeItemWidth = '100';                            // width of the icons
                        var maxWidth = windowSize;                              // max div width on screen 
                        activeItemcount = maxWidth / activeItemWidth;           // max icon with actual screen width
                        activeItemcount = Math.round(activeItemcount) -1;       // calculation
                           console.log(activeItemcount);


                   var i = '0'; 

                     $('.platform-view').each(function(){
                            if(i < activeItemcount ){
                            $(this).wrapAll('<div class="iconview-1"  />');
                            i++;
                            }else{  
                                $(this).wrapAll('<div class="iconview-2" />');

                            }




                    });


                   };
4

2 回答 2

1

我没有把你说清楚。但是此代码将在调整大小时返回窗口的可变宽度。

jQuery: $(window).resize(function() {

$('#log').append('<div>'+$(window).width()+'</div>');

});

HTML：

示例： 代码示例

于 2012-12-31T09:31:52.047 回答
0

将您的计算放入它自己的函数中：

function calculateIcons()
{
    var viewport = { width: $(window).width(), height: $(window).height() };
    // Do cool things with viewport.width
}

然后你可以简单地将这个函数绑定到 DOMReady 和resizejQuery 中的函数，如下所示：

$(calculateIcons);
$(window).resize(calculateIcons);
于 2012-12-31T09:26:19.903 回答