Jquery-Masonry prawie zawsze puste przestrzenie

Question

Próbowałem masonerii, ale nie mogę jej uruchomić tak, jak chciałem. Elementy, których używam różnią się szerokością i wysokością, ale wszystkie pasują do siatki (4 różne rozmiary, wszystkie wielokrotności najmniejszych + marginesów). Obliczyłem także rozkład elementów (7 najmniejszych, 4 ze wszystkich pozostałych), które mogą dokładnie pasować.

Rzadko zdarza się, że murze dobrze się do nich dopasowuje, czasami czai się na dole, czasem kilka jest źle położonych. Zawsze jest tak, że w jednym widoku widzę, jakie elementy należy przenieść, aby pasowały.

Czy istnieje sposób na zwiększenie agresywności muru w ruchomych elementach? A może to zrobić dwa razy, aby upewnić się, że nie ma pustych miejsc?

Answer 1

Powinieneś prawdopodobnie spojrzeć na "wielkiego brata" murarza Isotope here. Pamiętaj, że jeśli masz elementy posortowane w określonej kolejności lub ustalone w określonej kolejności - i które są szersze niż szerokość pojedynczej kolumny - mogą "zablokować" kolumnę przy wąskiej szerokości przeglądarki.

EDIT Może this fiddle wyjaśnia to nieco lepiej. Jeśli spojrzeć na tego jednego i - przy zachowaniu numerów w div - widać, że kolejnym elementem murze (czerwona elementem 5) może ewentualnie nie pasuje w białym kwadracie jak musi pochodzić po elemencie 4; więc tam, gdzie musi się skończyć, oznacza to, że z tylko trzema rzędami pasującymi, otrzymuje się białą przerwę. Może możesz użyć metod shuffle i/lub reLayout izotopy i poświęcić zamawianie swoich elementów w ściśle określonej kolejności? Najlepszy byłby jsfiddle z twoim problemem.

<article> 
    <div class="tile blue"><p>1</p></div> 
    <div class="tile black"><p>2</p></div> 
    <div class="tile tall yellow"><p>3</p></div> 
    <div class="tile grey"><p>4</p></div> 
    <div class="tile wide red"><p>5</p></div> 
    <div class="tile green"><p>6</p></div> 
    <div class="tile grey"><p>7</p></div> 
    <div class="tile blue"><p>8</p></div> 
    <div class="tile green"><p>9</p></div> 
</article> 

---

$('article').isotope({ 
    itemSelector : '.tile', 
    masonry: { 
     columnWidth: 100 
    } 
}); 

---

article .tile { 
    display: block; 
    float: left; 
    box-sizing: border-box; 

    width: 100px; 
    height: 100px; 

    font-size: 3em; 
    font-weight: 700; 

    padding: 0 6px; 
    color: #fff; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 

    border:1px dotted black; 
} 

article .tile.wide { 
    width: 200px; 
} 

article .tile.tall { 
    height: 200px; 
} 

.tile.yellow { background: yellow; } 
.tile.red { background: red; } 
.tile.blue { background: blue; } 
.tile.black { background: black; } 
.tile.grey { background: grey; } 
.tile.green { background: green; } 

Answer 2

Aby rozwinąć na odpowiedź Dana, który właśnie miał ten problem samodzielnie, wydaje się, że Packery jest bardziej aktualne; much more maintained wersja murarska - od tego samego autora. Nie jest dla mnie jasne, dlaczego oba projekty istnieją jako oddzielne podmioty, z jedynie literami w nich ustalonymi.

Dobrą wiadomością jest to, że jest prawie całkowicie zamiennikiem. Jedyną zmianą, którą musiałem wprowadzić (inną niż nazwy masonry ->packery w przypadku użycia) było usunięcie opcji, ponieważ jest to domyślna i jedyna opcja w pakiecie.

To była isFitWidth: true, moja słaba próba zmuszenia Masonera do spakowania rzeczy zbliżonych do tego, jak ładnie wygląda Paczka bez żadnych opcji.

Kolejna miła odmiana z Packery że gutter: x odnosi się do pionu, jak również rynien poziomych. W masonerii, to był tylko poziome - choć błahe z margin-bottom w CSS, to czułem się jak niepotrzebnej hack.