2回答

• 

  Jason_途牛

  2018-09-15 21:04:59

  $(window).on('load', function () {
  //取得图片整个容器DOM对象
  var $boxs = $("#main>div");
  // 一个图片框的宽
  var w = $boxs.eq(0).outerWidth();
  //每行能展示的图片列数
  var cols = Math.floor($(window).width() / w);
  //给最外围的main元素设置宽度和外边距
  $('#main').width(w * cols).css('margin', '0 auto');
  //并求出#main元素的左侧和页面边界的距离，供下面计算使用
  var letPadding = ($(window).width() - cols * w) / 2;
  //用于存储 每张图片容器高度。
  var hArr = [];
  $boxs.each(function (index, value) {
  // 返回每个图片容器的高度值
  var h = $boxs.eq(index).outerHeight();
  //第一行图片的条件是 index < cols
  if (index < cols) {
  //每次给数组存入高度值
  hArr[index] = h;
  } else {
  var minH = Math.min.apply(null, hArr);
  var minHIndex = $.inArray(minH, hArr);
  let leftPx = minHIndex * w + letPadding;
  $(value).css({
  'position': 'absolute',
  'top': minH + 'px',
  'left': leftPx + 'px'
  })
  //累计改变hArr中最小元素的高度值，直到$boxs数组最后一个元素完成时，结束
  hArr[minHIndex] += $boxs.eq(index).outerHeight();
  }
  })
  $('#main').width(w * cols).css('margin', '0 auto');
  })

  
  

  1 0

  Jason_...

  34行是多余的

  2018-09-15 21:06:10

  共 1 条回复 >

• 

  慕村8974351

  2018-01-05 23:35:26

  已看到错误
  

  0 0