이 스크립트로 반응 형 정렬 가능한 그리드 레이아웃 작성

맞춤 그리드 처음부터 만드는 가장 힘든 기능 중 일부입니다. 많은 석조 격자 플러그인을 찾을 수 있지만 각각에는 그들 자신의 제한과 요구 사항이있다..

그만큼 Muuri 대본 필요한 모든 사람들을위한 강력한 대안입니다. 터치 지원이 가능한 정렬 및 응답 성이 뛰어난 그리드 요소.

그것에 내장되어 있습니다. 애니메이션을위한 Velocity.js, 와 함께 모바일 터치를 처리하기위한 Hammer.js 라이브러리. Muuri 하지 않습니다 jQuery가 필요하다., 그리드 인터페이스를위한 몇 가지 바닐라 자바 ​​스크립트 플러그인 중 하나입니다..

메인 프로젝트 페이지에서 모든 기능을 갖춘 아름다운 그리드 데모. 애니메이션 효과, 끌어서 놓기 지원 및 다양한 크기의 다양한 그리드 요소 이 데모는 Muuri 그리드로 얼마나 많은 컨트롤을 가지고 있는지 보여줍니다..

선택할 수 있습니다. 표시 할 요소, 클래스 (예 : 필터링)와 빈 공간을 채우는 방법.

벽돌 그리드는 종종 빈 자리를 남깁니다. 왜냐하면 격자 요소가 항상 완벽하게 맞지는 않습니다.. 이것은 Pinterest와 같은 더 큰 웹 사이트의 경우 매우 일반적입니다. 하지만, 드래그 가능한 그리드 아이템 추가하기 거의 모든 사용자 제어 인터페이스.

생각 해봐. 위젯이 적용된 소셜 프로필 그리고 그들이 어떻게 일할 것인가. 또는 생각해보십시오. 프로그레시브 웹 앱으로 실행되는 맞춤 할 일 목록 자바 스크립트. 실제로 샘플 목록을 보여주는 Muuri 페이지와 모바일에서 PWA로 작동하는 방법에 대한 훌륭한 데모가 있습니다.

시작하려면 Muuri 스크립트와 함께 모든 JavaScript 의존성을 포함합니다.. 당신은 npm을 통해 이들을 끌어낼 수 있거나 GitHub 레포에서 복사본을 얻을 수 있습니다..

그럼, 너 컨테이너 그리드 요소를 생성한다. 과 목표를 새 인스턴스로 Muuri () 방법. GitHub 저장소에서 코드 스 니펫을 복사하여 사용하기가 매우 쉽고 특히 쉽습니다..

와 모든 최신 브라우저 (IE9 이상) 및 터치 지원 인터페이스를 완벽하게 지원합니다., 이 플러그인은 끌어서 놓기 그리드 기능에 가장 적합합니다..

Muuri 홈페이지를 읽고 라이브 데모를 조작하여 더 자세히 알아보십시오. 이것은 동적 그리드를위한 훌륭한 시스템 그리고 그것은 여전히 활발한 개발 중이다., 그래서 당신은이 플러그인이 장거리에있을 거라고 믿을 수 있습니다..