function waterfall(cloums, gap) {
  // var winwidth = document.body.clientwidth;
  var winwidth = $(".li-box").width();
  var pagewidth = winwidth - gap * (cloums - 1);
  var itemwidth = parseint(pagewidth / cloums);
  var item = document.queryselectorall(".li-box .li");
  var arr = [];
  $(item).width(itemwidth);

  for (var i = 0; i < item.length; i++) {
    if (i < cloums) {
      item[i].style.top = 0;
      item[i].style.left = itemwidth * i + gap * i + "px";
      arr.push(item[i].offsetheight);
    } else {
      var minheight = arr[0];
      var index = 0;
      for (var j = 0; j < arr.length; j++) {
        if (minheight > arr[j]) {
          minheight = arr[j];
          index = j;
        }
      }
      item[i].style.top = arr[index] + gap + "px";
      item[i].style.left = item[index].offsetleft + "px";
      arr[index] += item[i].offsetheight + gap;
    }

    // $(".box").height(arr[index] + item[i].offsetheight);
  }

  var maxh = math.max.apply({}, arr) + gap;
  $(".li-box").css("height", maxh);
}