具有固定宽度和高度的砌体？

Question

我想要这样的东西

容器盒的宽度和高度都是固定的

盒子大小不同,如1*1或2*1或3*3和......但不大于4宽,3高

框上的数字是加载时框的索引

我试着写一个算法宽度这些条件

首先 - 将item1放在第一个位置(0,0)

第二个 - 第一个框创建2个位置:(0,1)和(1,0)

第三项 - 第2项应决定2个新位置,并适应最佳位置以减少差距

放置时,每个项目在其左上角和右下角产生2个新位置

我还必须检查容器和盒子区域的剩余区域,以检查容器是否已满

如果容器已满,则创建新容器并将其余项目放在那里

我发现了一些我的算法失败但我应该找到解决方案的例子

也许按区域和空间排序这些盒子是最简单的解决方案

但我不喜欢它becuz它beaks设计我的意思是在顶部更大的盒子和底部的小盒子:(这是不好加我想在infinte滚动上加载这些盒子然后我不知道我的下一个盒子大小是什么所以我不能根据地区放置它们

在我放弃之后,我检查了所有关于这种设计的插件

像同位素和砖石和香草砖石和格栅和......

我试着定制同位素

JSfiddle链接显示我的尝试 链接

<a href="#" id="good">Shuffle</a> |
<a href="#" id="bad">Original order (broken)</a>
<div id="container">
   <div class="item w1 h1">1</div>    
   <div class="item w2 h1">2</div>
   <div class="item w1 h2">3</div>
   <div class="item w1 h1">4</div>
   <div class="item w2 h2">5</div>
   <div class="item w2 h1">6</div>
   <div class="item w1 h1">7</div>
   <div class="item w1 h1">8</div>
   <div class="item w1 h2">9</div>
   <div class="item w2 h2">10</div>
   <div class="item w2 h1">11</div>
 </div>?

 #container {
   margin: 0 auto;
   border: 2px solid black;
   height: 430px;
   margin: 20px 0 0 0;}

 .item {
  float: right;
  background: #CCC;
  width: 100px;
  height: 100px;
  margin: 10px;}

 .item.w1 {
   width: 100px;}

 .item.w2 {
   width: 200px;}

 .item.h1 {
   height: 100px;}

 .item.h2 {
   height: 200px}

 .isotope,
   .isotope .isotope-item {
   -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
      transition-duration: 0.8s;}

  .isotope {
    -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      transition-property: height, width;}


  .isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
      transition-property:         transform, opacity;}?


$(function(){

$("#good").click(function() {
    $("#container").isotope('shuffle');
    return false;
});

$("#bad").click(function() {
    $("#container").isotope({'sortBy':'original-order'});
    return false;
});

$("#container").isotope({
  layoutMode: 'masonryHorizontal',
  masonryHorizontal: {
    rowHeight: 60
  }
});  });?

但它似乎无法同时固定宽度和高度

这对我来说很重要因为我希望在盒子之间保持相同的边距而不是改变

我也想要检测浏览器高度并仅用这3个状态而不是可变高度来改变高度

5行,4行和3行

我的问题:

首先 - 我很高兴自己编写这个算法所以请帮我详细找到这个算法的最佳解决方案？

我在过去的两天里尝试了很多方法

第二 - 我们可以像我预期的那样定制其中一个插件吗？

Answer 1

最简单的是使用kd树将树细分为垂直和水平的euklidian 2d空间.然后,您可以将矩形打包到其中一个创建的空间中,并递归地细分树.在线提供了一个Jquery treemap插件示例.jquery插件砌体可以做同样的事情,但它更像是1d bin-packing解算器.2d bin-packing更加复杂,也可能意味着旋转矩形.以下是打包光照贴图的示例:http://www.blackpawn.com/texts/lightmaps/default.html.为了实现更好的打包,您可以按某种顺序(desc,asc,random等)对大小进行排序.这也会创建不同的树形图.