Създаване на бързи масови оформления с Bricks.js

Винаги е било лесно създайте мрежи с jQuery, използване на приставки и безплатни уроци от разработчиците.

Въпреки това, зидарите решетки са по-строги за изграждане, тъй като те не се вписват равномерно в цялата страница. Ще имате ширини с фиксиран размер за колони, но височината на артикула може да варира диво.

За да направите перфектна зидана решетка имате нужда от плъгин, като например Bricks.js.

Този плъгин е напълно отворен код и е абсурдно бърз. Тя ще направете решетката за по-малко от половин секунда, дори с десетки елементи на страницата.

Повечето хора разпознават мрежовите мрежи от Pinterest, тъй като те са популяризирали оформлението. Но оттогава е станала използвани в много други уебсайтове, също.

За да започнете с Bricks.js, ще ви трябва съдържание и a оформление на страницата по подразбиране. Инсталирате плъгина направо от npm или чрез GitHub, ако това е по-лесно.

При първоначалната настройка преминавате три специфични параметъра:

1. Контейнер - а DOM контейнер елемент за мрежата
2. натъпкан - един атрибут което определя как текат елементите в мрежата
3. Размери - един редица ширини и улуци, дефинирани в пиксели

Приставката използва всички тези стойности, за да автоматизира зидарската мрежа от нулата.

И дори можете използвайте го за безкрайно зареждане ако искате зидани мрежи, които работят точно като Pinterest.

Разгледайте демонстрационната страница за интерактивна мрежа които можете да промените за тестване. Ти дефиниране на общия брой елементи и ще автоматизира процеса, докато показва общото време за визуализация.

Например тествах мрежа с 500 елемента и това само отне 13 милисекунди да завърши. Това не влияе върху времето за зареждане на всички 500 изображения, но 13 ms за автоматично генерирана мрежа е много впечатляващо.

Започнете сами, като изтеглите файловете от GitHub и следвайте инструкциите за инсталиране. В началото може да се почувствате объркващо, но колкото повече играете с него, толкова по-лесно е да го настроите.