벽돌이 작동하지 않습니다. 우리는 Pinterest 스타일로 게시물을 디자인하기 위해 jQuery Masonry 스크립트를 사용합니다. jQuery Mansory 란 무엇입니까?
블로그 섹션에서. 이 WordPress 사진 테마가 우리의 예가 될 것이지만 아마도 다른 WordPress 사이트에서 jQuery Masonry가 사용되는 것을 본 적이 있을 것입니다.
jQuery Mansory 란 무엇입니까?벽돌은 요소를 수평으로 배열하고 모니터 너비에 따라 수직 위치로 이동할 수 있는 CSS에 추가된 것으로 간주될 수 있습니다. 결과적으로 서로 다른 높이의 요소 사이의 수직 간격이 최소화됩니다. CSS를 사용하여 동일한 작업을 수행하려면 내 말을 믿으십시오. 골치 아픈 일이 많을 것입니다.
이 예에서는 사용 전후에 jQuery Masonry가 어떻게 작동하는지 확인할 수 있습니다.
결과를 명확하게 볼 수 있듯이 css float: left를 사용하고 빈 공간이 남으면 CSS 위치를 사용해야 합니다. 이는 구성하기 상당히 문제가 있으며 가능하지만 왜 Masonry는 이에 도움이 되지 않습니다.
WordPress 사이트에서 jQuery Mansory 사용하기벽돌은 두 가지 경우에 사용될 수 있습니다. 첫 번째는 정보가 포함된 모든 블록의 너비가 동일한 경우입니다. 이 경우 다음 스크립트를 사용해야 합니다.
jQuery(document).ready(function($)( $("#content_masonry").masonry(( SingleMode: true )); ));
$("#content_masonry"). masonry((singleMode:true)); } ) ; |
너비가 다른 블록이 있는 경우 다음 코드를 사용해야 합니다.
jQuery(document).ready(function($)( $("#content_masonry").masonry((columnWidth: 300 )); ));
jQuery(문서). 준비(함수($)( $("#content_masonry"). masonry((columnWidth: 300)); } ) ; |
여기서 columnWidth는 그리드의 너비(픽셀 단위)입니다. Masonry는 다음 두 가지 규칙을 따릅니다.
첫 번째 요소의 총 너비는 190px이고 margin-right: 0입니다. 그리고 두 번째 요소의 margin-left: 0은 이론적으로 이 두 요소가 서로 닿아야 합니다. 하지만 ColumnWidth가 200px로 설정되어 있으므로 두 번째 요소는 200px 거리에서 나타나기 시작합니다.
스크립트에 ColumnWidth 값이 없고 모든 요소가 차례로 시작되면 이 프로세스가 발생하지 않으므로 여백을 사용하여 구분해야 합니다.
jQuery Masonry와 WordPress 3의 놀라운 점은 다음과 같습니다.이제 약간의 코딩을 해보겠습니다. 먼저 header.php 파일에 필요한 jQuery 및 Masonry 라이브러리를 포함시키겠습니다. 이 코드를 header.php에 넣으세요(오프사이트에서 다운로드할 수 있습니다):
//jQuery 연결