10 가지 가장 매력적인 jQuery 그리드

jQuery는 일반적으로 HTML 요소를 선택하고 DOM을 조작하는 쉬운 방법을 제공하므로 자바 스크립트 프로그래밍에 발을 디딘 대부분의 사람들에게 첫 번째 선택입니다. 최근 W3Techs 통계에 따르면 jQuery는 널리 사용됩니다., “jQuery는 우리가 알고있는 JavaScript 라이브러리가있는 모든 웹 사이트의 95.4 %가 사용합니다..”

jQuery는 많은 JavaScript 라이브러리에서 종속성으로 사용되며, 새로운 주요 릴리스 인 jQuery 3.0의 알파 버전도 이미 나와 있습니다. 프로젝트가 어떤 방식 으로든 jQuery를 사용하고 역동적이고 유연한 레이아웃 디자인을 위해 프론트 엔드 스택에 jQuery 그리드 플러그인을 포함시키는 것을 고려해 볼 가치가있다..

jQuery 그리드의 작동 원리?

jQuery 그리드를 사용하면 귀하의 사이트에 대한 Pinterest와 같은 레이아웃을 만드십시오.. 가상 매트릭스처럼 작동하며, “상자 안의 상자” 원리. jQuery 그리드는 항목의 최적 배치가 무엇인지 동적으로 계산하고 가장 빈 공간을 남기는 방식으로 페이지를 채 웁니다.이 상자에서 볼 수있는 것과 같습니다..

CSS 그리드와 비교되는 jQuery 그리드의 가장 큰 장점은 다른 너비와 높이를 가진 이미지 나 다른 미디어 요소로 작업한다는 점입니다. 멋진 자바 스크립트 효과도 jQuery 격자를 사용하여 최신 레이아웃을 만드는 데 큰 이유입니다..

이 게시물에서 10 가지 가장 매력적인 jQuery 그리드 현재 시장에 나와 있습니다. 물론 jQuery와 마찬가지로, 모두 오픈 소스이며 무료입니다..

1. jQuery 중첩

jQuery Nested는 사용자에게 편리한 기능을 제공합니다. 반응이 빠른 다중 열 그리드 레이아웃 모든 종류의 장치에서 작동합니다. 이 jQuery 플러그인은 완전히 갭이없는 것으로 광고합니다. 처음에는이 슬로건이 싸구려 마케팅 트릭처럼 들릴지 모르지만 플러그인은 실제로 크리에이티브가 약속 한대로 틈새 자유를 매우 잘 수행합니다..

중첩 된 jQuery는 다음에서 고유 한 스크립트를 따른다. 그리드 매트릭스 채우기. 먼저 다중 열 그리드를 만든 다음 행렬에 대해 간격을 스캔하고 여러 요소를 재정렬하여 채 웁니다. 마지막으로 - 그리드를 깔끔하게 만드는 단계입니다. 하단 행의 간격을 적절하게 맞추지 못하는 요소의 크기를 조정합니다..

2. Freewall

Freewall을 사용하면 이미지 그리드, 중첩 된 그리드, 석조 또는 메트로 스타일 그리드 등 원하는 레이아웃을 만들 수 있습니다. 자바 스크립트 변수로 설정할 수있는 많은 옵션이 있습니다. 거터, 거터, 애니메이션, 셀, 셀, 등등과 같은 맞춤 이벤트가 있습니다. onGapFound 과 onResize, 및 사용자 지정 방법.

웹 사이트에서 멋진 코드 예제를 찾을 수 있습니다. 개발자는 구형 브라우저를 디자인해야하는 불쌍한 영혼을 돌 보았으므로 Freewall은 Internet Explorer 8, 또한 사용할 수없는 JavaScript 용 솔루션, 사용함에 따라 CSS 대체 전략으로 CSS 3 애니메이션. 여기에서 Freewall에 대한 기사를 확인하십시오..

3. 벽돌

좋은 오래된 석조의 이름은 모든 경험 많은 디자이너의 귀에 익숙해야합니다. 당신이 들어 본 적이 없다면, 벽돌은 캐스 케이 딩 그리드 레이아웃 라이브러리 jQuery와 바닐라 자바 ​​스크립트 모두에서 작동하는.

이 편리한 플러그인은 많은 인기있는 WordPress 테마의 기반입니다. CDN에서 직접 라이브러리를 쉽게 연결할 수 있으므로 서버에 업로드 할 필요조차 없습니다..

>