我想要这样的东西
容器盒的宽度和高度是固定的
盒子尺寸不同，如 1 * 1 或 2 * 1 或 3 * 3 和...但不大于 4 宽和 3 高
盒子上的数字是加载时盒子的索引
我试图写一个算法宽度这些条件
first - 将 item1 放在第一个位置 (0,0)
第二个 - 第一个框创建 2 个位置：(0,1) 和 (1,0)
第三 - item2 应在 2 个新位置之间做出决定，并适合最佳位置以减少差距
并且每个项目在放置时会在其左上角和右下角产生 2 个新位置
我还必须检查容器和盒子区域的剩余区域，以检查容器是否已满
如果容器已满，则创建新容器并将其余物品放在那里
我发现了一些我的算法失败的例子，但我应该找到解决方案
也许按区域和空间对这些框进行排序是最简单的解决方案
但我不喜欢它，因为它破坏了设计我的意思是顶部的大盒子和底部的小盒子:(这不好，而且我想将这些盒子加载到无限滚动然后我不知道我的下一个盒子尺寸是多少所以我不能根据区域放置它们
放弃后，我检查了所有关于这种设计的插件
像同位素和砖石和香草砖石和网格和......
我试图定制同位素
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排
我的问题：
首先 - 我很高兴自己编写这个算法，所以请帮我详细找到这个算法的最佳解决方案？？
在过去的两天里我尝试了很多方法
第二 - 我们可以按照我的预期定制其中一个插件吗？如何定制？