Mauerwerk mit fester Breite und Höhe?

Ich möchte so etwas wie dies

container-box mit fester Breite und Höhe

box-Größen sind unterschiedlich, wie 1 * 1 oder 2 * 1 oder 3 * 3 und ...
aber nicht größer als die 4 in der Breite und 3 in der Höhe

die zahlen in Kästchen sind die index-Kisten beim laden

Versuchte ich zu schreiben Sie einen Algorithmus, der Breite diese Bedingungen

erste - element1 in der ersten position (0,0)

zweiten - ersten-box erstellen 2 Positionen : (0,1) und (1,0)

Dritte - die item2 entscheiden sollte zwischen 2 neuen Positionen und passen in der besten position für weniger Lücke

und jedes Element, wenn Sie produzieren 2 neue position in der linken oberen Ecke und der rechten unteren Ecke es

außerdem muss ich prüfen, die Fläche blieb der container und Boxen-Bereich für die Prüfung, wenn der container voll ist oder nicht

und wenn der container voll ist die Schaffung neuer Behälter und setzen Sie die übrigen Elemente auf es

Fand ich einige Beispiele, die mein Algorithmus versagt, sondern ich sollte eine Lösung finden,

vielleicht Sortieren Sie diese Felder durch die Gegend und der Raum ist die einfachste Lösung

aber ich mag es nicht gern, becuz es Schnäbel der Entwurf, den ich meine größeren Boxen an der Oberseite und kleinere Kästen an der Unterseite 🙁 es ist nicht gut
plus ich möchte, laden Sie diese Felder auf infinte scroll dann weiß ich nicht, was ist meine nächste box Größe
so kann ich nicht legen Sie Sie auf der Grundlage der Bereich

nachdem ich gived up, überprüfte ich alle plugins über diese Art von design

wie isotope und Mauerwerk und Vanille Mauerwerk und gridster und ...

Ich habe versucht, anpassen, Isotop

die JSfiddle-link zeigt meinen Versuch der 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
  }
});  });​

aber es scheint nicht über eine Feste Breite und Höhe gleichzeitig

es ist wichtig für mich, becuz ich möchte, dass dieser gleiche Abstand zwischen den Boxen und nicht ändern

Ich will auch erkennen browser Höhe und ändern Sie die Höhe mit gerade diesen 3 Staat und nicht die variable Höhe

5 Reihen , 4 Reihen und 3 Reihen

meine Fragen :

erste - ich bin so froh, das zu schreiben-Algorithmus ist mein selbst
also bitte helft mir die beste Lösung zu finden für diesen Algorithmus im detail
??

Ich habe viele Wege versucht, in den letzten 2 Tagen

zweiten können wir passen diese Plug-ins, wie ich erwartet hatte und wie ??

InformationsquelleAutor Cameron A | 2012-12-31