otwarty
Zamknąć

Murarstwo nie działa. Do projektowania postów w stylu Pinteresta używamy skryptu jQuery Masonry. Czym jest jQuery Mansory

07.12.2023 -
Smartfony

W dziale bloga. Ten motyw fotograficzny WordPress będzie naszym przykładem, ale prawdopodobnie widziałeś jQuery Masonry używany w innych witrynach WordPress.

Co to jest jQuery Mansory

Murarstwo można uznać za dodatek do css, za pomocą którego można układać elementy poziomo, przesuwając się do pozycji pionowej w zależności od szerokości monitora. Dzięki temu minimalizowane są pionowe szczeliny pomiędzy elementami o różnej wysokości. Jeśli chcesz zrobić to samo za pomocą css, uwierz mi, będziesz miał mnóstwo bólów głowy.

W tym przykładzie możesz zobaczyć, jak działa jQuery Masonry przed i po użyciu:

Jak widać wynik, jeśli użyjesz css float: left, pozostaną puste przestrzenie, musisz użyć pozycji css, co jest dość problematyczne w konfiguracji, jest to możliwe, ALE dlaczego, Masoneria w tym nie pomoże.

Korzystanie z jQuery Mansory w witrynach WordPress

Mur można zastosować w dwóch przypadkach. Pierwsza ma miejsce, gdy wszystkie bloki z informacjami mają tę samą szerokość. W takim przypadku musisz użyć tego fragmentu skryptu:

jQuery(dokument).ready(function($)( $("#content_masonry").masonry(( singleMode: true )); ));

$("#content_masonry"). mur((singleMode:true));

} ) ;

Jeśli masz bloki o różnych szerokościach, musisz użyć następującego kodu:

jQuery(dokument).ready(function($)( $("#content_masonry").masonry(( kolumnaWidth: 300 )); ));

jQuery (dokument) . gotowy(funkcja($)(

$("#content_masonry"). mur((szerokość kolumny: 300));

} ) ;

Gdzie kolumnaWidth jest szerokością siatki (w pikselach). Masoneria będzie przestrzegać tych dwóch zasad:

  • Całkowita szerokość elementu (obliczona przy użyciu tego wzoru) = szerokość CSS + prawe dopełnienie + lewe dopełnienie + szerokość-prawa-obramowanie + szerokość-lewego-obramowania + margines-prawy + margines-lewy
  • W przypadku korzystania z kolumny ColumnWidth wszystkie elementy muszą być ustawione poziomo, aby obliczyć szerokość ColumnWidth (na przykład dla ColumnWidth: 200 elementy zaczną się od 0, 200 lub 400 pikseli itd.). Może nie jest to do końca jasne, ale nie ma w tym nic skomplikowanego, spójrz na zdjęcie.

    • Pierwszy element ma całkowitą szerokość 190px i margines z prawej: 0. Natomiast drugi element ma margines z lewej: 0, teoretycznie te dwa elementy powinny się stykać. Ponieważ jednak ColumnWidth jest ustawione na 200px, drugi element zaczyna pojawiać się w odległości 200px.

    Proces ten nie nastąpi, jeśli w skrypcie nie mamy wartości ColumnWidth i wszystkie elementy zaczynają się jeden po drugim, dlatego konieczne jest ich oddzielenie za pomocą marginesu.

    A więc cuda jQuery Masonry i WordPress 3..

    Teraz zróbmy małe kodowanie. Najpierw dołączmy niezbędne biblioteki jQuery i Masonry do pliku header.php. Umieść ten kod w header.php (możesz go pobrać z innej strony):

    //połącz jQuery

    Sieci i komunikacja
    Usługi online