Question

所以我有一个div wrap，其大小是屏幕宽度的百分比。这个wrap内有多个.item divs。随着窗口变小，它显然会突破新的线条。

我写了一些代码，它基本上取width的{{1}}并将其除以wrap框的宽度之和。但缺点在于，它考虑的是它总共可以容纳多少个盒子，是一个可以像构建块一样完美地混合和匹配它们，但这不是它的工作方式，因为它的排序是停滞不前的。

我怎样才能使这个逻辑工作？

jQuery的：

.item

HTML：

var itemWidth = 0;
var lineCount = 1;


$(window).on('resize', function(){
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  lineCount=1;

  $('.item').each(function(index, element) {
      if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = 0;
      }
  });
});

CSS：

<div id="container">
  <div class="rect"> 
    <div class="line">
  </div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
</div>


 <h1 class="answer"></h1>

Answer 1

通过调试每一步来弄清楚我的逻辑错误。

正确的jQuery：

var itemWidth = 0;
var lineCount = 1;


$(window).on('resize', function(){
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  var list = [];
  lineCount=1;

  $('.item').each(function(index, element) {
      if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = $(element).outerWidth();
      }
  });
});

jQuery计算div中的换行符数量？

1 个答案: