Question

我想要这样的东西

enter image description here

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

盒子大小不同，如1 * 1或2 * 1或3 * 3和...... 但宽度为4，高度为3的宽度不大

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

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

首先 - 将item1放在第一个位置（0,0）

秒 - 第一个框创建2个位置：（0,1）和（1,0）

第三 - 第2项应该在2个新位置之间做出决定，并且适合更小的差距

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

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

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

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

根据区域和空间对这些方框进行排序是最简单的解决方案

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

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

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

我试图定制同位素

JSfiddle链接显示我的尝试the link

<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等对大小进行排序。这也会创建一个不同的树形图。

Answer 2

我遇到了类似的问题，最后为这个问题编写了一个jQuery插件。可能会有一些改进，但它会指出你正确的方向 -

插件 - https://github.com/DrewDahlman/Mason

关于理论的博客文章 - http://www.drewdahlman.com/meusLabs/?p=218

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

2 个答案: