Bricks.js로 빠른 벽돌 그리드 레이아웃 만들기

항상 매우 간단합니다. jQuery로 그리드 생성, 개발자의 플러그인 및 무료 자습서 사용.

그러나, 벽돌 격자는 건축하기가 어렵습니다. 페이지 전체에 균등하게 맞지 않는다.. 열에 고정 크기의 너비가 있지만 품목 높이는 격렬하게 변화 할 수있다.

만들기 위해 픽셀 완벽한 석조 격자 다음과 같은 플러그인이 필요합니다. Bricks.js.

이 플러그인은 완전히 오픈 소스이며 엄청나게 빠릅니다. 그것은 그리드를 0.5 초 이내에 렌더링한다., 페이지에 수십 개의 항목이있는 경우에도.

대부분의 사람들은 레이아웃을 대중화 한 Pinterest의 벽돌 그리드를 인식합니다. 그러나, 이후 성장해 왔습니다. 다른 많은 웹 사이트에서 사용됨, 너무.

Bricks.js를 시작하려면 일부 내용 및 기본 페이지 레이아웃. 플러그인을 npm이나 GitHub에서 바로 설치할 수 있습니다..

초기 설정을 통과하면 3 개의 특정 매개 변수:

플러그인은 이러한 모든 값을 사용하여 벽돌 그리드를 처음부터 자동화합니다..

그리고, 당신은 심지어 무한 로딩에 사용 Pinterest처럼 작동하는 석공 격자를 원한다면.

데모 페이지에서 대화 형 그리드 테스트를 위해 변경할 수 있습니다. 당신 요소의 총 수를 정의하십시오. 총 렌더링 시간을 표시하면서 프로세스를 자동화합니다..

예를 들어, 500 요소 그리고 그것은 단지 가져 갔다. 13 밀리 초 완료. 이것은 500 개의 모든 이미지가로드되는 시간을 고려하지 않지만 자동 생성 그리드의 경우 13ms 매우 인상적이다..

GitHub에서 파일을 다운로드하고 설치 지침에 따라 직접 시작하십시오. 처음에는 혼란 스러울 지 모르지만 장난감을 많이 가지고 다닐수록 쉽게 설정됩니다..