Question

我有一些js代码，我想只在窗口处于“大”屏幕尺寸时运行，比方说900px。我希望像css中的媒体查询一样使用它，因此代码可以在特定的断点处打开和关闭。所以我假设我需要调整大小函数的某种条件，如下所示：

$(window).resize(function () {
    var viewportWidth = $(window).width();
    if (viewportWidth < 900) {

    }
});

然后把我想在大括号之间执行的代码放在一起，但它不起作用。

当屏幕调整为900px时，这是我想要执行的代码：

   function makeRowDiv(buildRow) {
      var row = document.createElement('div');
      row.className = 'row expanded row-spacing';
      for (var i = 0; i < buildRow.length; ++i) { 
        row.appendChild(buildRow[i]);
      } 
      return row;
    }

    window.onload = function () {
      var work = document.getElementById('work'),
          items = work.getElementsByTagName('div'),
          newWork = document.createElement('div');
      var buildRow = [],
          count = 0;
      for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        if (item.className.indexOf('columns') == -1) {
          continue;
        }
        // Extract the desired value.
        var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
            delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);
        if (count + delta > 12 && buildRow.length != 0) {
          newWork.appendChild(makeRowDiv(buildRow));
          count = 0;
          buildRow = [];
        }
        buildRow.push(item.cloneNode(true));
        count += delta;
      } 
      if (buildRow.length != 0) {
        newWork.appendChild(makeRowDiv(buildRow));
      } 

      // Replace work with newWork.
      work.parentNode.insertBefore(newWork, work);
      work.parentNode.removeChild(work);
      newWork.id = 'work';
    };

我假设

可以这样做

Answer 1

试试这个：

	$(window).on('resize',function () {
      var $width = $(window).width();
      console.log($width);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您也可以在javascript中使用媒体查询并将其用作您的条件

var mq = window.matchMedia( "(max-width: 900px)" );
if (mq.matches) {
  // window width is less than 900px
} else {
  // window width is more than 900px
}

Answer 3

你可以做这样的事情

function makeRowDiv(buildRow) {
      var row = document.createElement('div');
      row.className = 'row expanded row-spacing';
      for (var i = 0; i < buildRow.length; ++i) { 
        row.appendChild(buildRow[i]);
      } 
      return row;
    }
function loadData() {
      var work = document.getElementById('work'),
          items = work.getElementsByTagName('div'),
          newWork = document.createElement('div');
      var buildRow = [],
          count = 0;
      for (var i = 0; i < items.length; ++i) {
        var item = items[i];
        if (item.className.indexOf('columns') == -1) {
          continue;
        }
        // Extract the desired value.
        var matches = /large-(\d+)\s* large-offset-(\d+)/.exec(item.className),
            delta = parseInt(matches[1], 10) + parseInt(matches[2], 10);
        if (count + delta > 12 && buildRow.length != 0) {
          newWork.appendChild(makeRowDiv(buildRow));
          count = 0;
          buildRow = [];
        }
        buildRow.push(item.cloneNode(true));
        count += delta;
      } 
      if (buildRow.length != 0) {
        newWork.appendChild(makeRowDiv(buildRow));
      } 

      // Replace work with newWork.
      work.parentNode.insertBefore(newWork, work);
      work.parentNode.removeChild(work);
      newWork.id = 'work';
    };
  window.onload = loadData;

  window.onresize = function(){
	  if(window.innerWidth < 900){
        loadData();
        makeRowDiv(buildRow)
      }
  }

假设您要调用window.onload上添加的函数来进行窗口调整大小事件。

在window resize断点上执行js代码

3 个答案: