Question

这是此代码： https://jsfiddle.net/qw3fp7sk/

代码在页面上显示相同大小的div，并且div的数量适合页面的实际大小，无需滚动。

当我更改浏览器的窗口大小时，我想即时更改页面上的div数。 div的编号必须适合窗口，而无需滚动。

当前，仅当我单击jsfiddle的“运行”按钮时，页面调整大小后div的编号才会更改。

这是代码片段，它不起作用：

   $(window).on('resize', function() {

        // define global width and height variables
        var width = new jqUpdateSize().width;
        var height = new jqUpdateSize().height;

        // define div numbers to actual screen width (on one line)
        var lastw = '';
        for (var i = divwidthCalc; i < width; i+=divwidthCalc) {
        lastw++;
        }

        // define div numbers to actual screen height (on one row)
        var lasth = '';
        for (var i = divheightCalc; i < height; i+=divheightCalc) {
        lasth++;
        }

        // define the max div numbers
        var numDivMaxOnPage = lastw * lasth;

        //alert(numDivMaxOnPage);

        setGridDimensions(numDivMaxOnPage);


    });

预先感谢您的帮助。

Answer 1

问题出在您的numDivMaxOnPage变量上。它定义了两次。

// divs w, h, margin
    // you can modify these datas
    var divborder = 5;
    var divwidth = 100;
    var divheight = 100;
    // calculating the values to define max div on lines and on rows
    var divwidthCalc = divwidth+(divborder*2);
    var divheightCalc = divheight+(divborder*2);

    var numDivMaxOnPage = null;


  function setGridDimensions(n) {
        var html ='';
        for (var i = 0; i < numDivMaxOnPage; i++) {
        html += '<div class="row">' + (i+1);
        html += '</div>';
        }
        $(document.body).html(html);

         // div size css
        $('.row').css({'width': divwidth + 'px', 'height' : divheight + 'px', 'border-width' : divborder + 'px'});
    };

    calculate();

    // not working function...
    $(window).on('resize', function() {

        calculate();


    });

  function calculate() {
        var width = $(window).width();
        var height = $(window).height();

        // define div numbers to actual screen width (on one line)
        var lastw = '';
        for (var i = divwidthCalc; i < width; i+=divwidthCalc) {
        lastw++;
        }

        // define div numbers to actual screen height (on one row)
        var lasth = '';
        for (var i = divheightCalc; i < height; i+=divheightCalc) {
        lasth++;
        }

        // define the max div numbers
        numDivMaxOnPage = lastw * lasth;

    // run function
        setGridDimensions(numDivMaxOnPage);

  }

https://jsfiddle.net/ne05rftp/1/

Divs的编号适合于浏览器窗口，并具有调整大小

1 个答案: