그리드 테마의 포스트 들간의 수직 간격을 자동으로 줄이기

Question

나는 나의 wordpress 사이트를위한 맞춤 그리드 기반 테마를 만들고있다. 한 가지해야 할 일은 동일한 열의 게시물 사이의 세로 간격이 자동으로 축소되어 게시물의 높이가 다르더라도 그 사이에 빈 공간이 없도록하는 것입니다.

예를 들어, this site에서 그리드가 내가 원하는 방식으로 축소되어 있습니다. 그러나 this site에서 게시물은 수평 정렬 된 행으로 정렬되며 각 행 사이에는 공백이 있습니다.

첫 번째 예제 사이트에서와 같이 게시물을 정렬하는 데 사용되는 기술의 이름이 있습니까? 나는 적어도 Google이 그것을 할 수있는 방법을 배울 수있는 용어를 찾고 있습니다 ...하지만이 방법으로 자동 정렬하는 그리드를 만드는 방법을 보여줄 코드 샘플이 더 좋습니다.

감사합니다.

Answer 1

이것은 동적 격자 혹은 클립 형상 격자로서 알려져있다. 그것은 Pinterest에 의해 대중화되었다.

기본적으로 CSS와 HTML만으로는이 작업을 수행 할 수 없습니다. 이 유형의 그리드는 Javascript 또는 서버 측 처리로 처리해야합니다. 나는 자바 스크립트로 가서 당신이 이 (당신이 연결된 첫 번째 사이트가 자신의 레이아웃 플러그인을 사용주의) 정확히 원하는 것을 할 많은 jQuery를 플러그인 중 하나 체크 아웃 제안 : (

• http://masonry.desandro.com/무엇 당신이 사용에 연결된 첫 번째 사이트)
• http://www.wookmark.com/jquery-plugin
• http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
• http://yconst.com/web/freetile/

이 중 하나가 트릭을 수행해야합니다.

벽돌기 벽돌을 사용하여 블록 사이의 컨테이너 폭과 간격을 CSS로 설정 했습니까? Javascript에서 원하는 열 너비를 지정합니다. 블록 너비와 간격을 계산하면 컨테이너에있는 열의 수를 결정할 수 있습니다.

와우 마크 및 blockssIt에는 유사한 구성 옵션이 있습니다. 컨테이너 폭과 블록 너비를 지정할 수 있습니다. 오프셋과 (블록 사이의 거리) 사이에 같은 너비의 3 열로 정렬되도록 정렬 할 수 있습니다. 상자 밖으로 Freetile

그러나 조금 CSS 및/또는 직접 플러그인을 수정과 같은 일을 수행 할 수있을 것 같은 폭 열을 (그 기능 중 하나)를 지원하지 않습니다.

여기서 중요한 부분은 이러한 플러그인 중 하나를 설정하고 작동시키는 것입니다. 일단 설치되면 CSS를 원하는대로 조정하면됩니다. 이 플러그인들 각각은 코드 샘플과 문서뿐만 아니라 실제 예제를 제공합니다.

HTML :

<div id="grid-container"> 
    <div class="post">...</div> 
    <div class="post">...</div> 
    <div class="post">...</div> 
    <div class="post">...</div> 
    <div class="post">...</div> 
</div> 

CSS :

#grid-container { 
    width: 940px; //width of your container 
} 
.post { 
    margin: 10px; //spacing between each block/post 
} 

자바 스크립트 : 벽돌의 간단한 구현은 다음과 같을 것이다

는

$('#grid-container').masonry({ 
    itemSelector: '.post', //selector for each block 
    columnWidth: 300  //width of your columns 
}); 

각 블록 게시물 10px 넓은 300px 될 것입니다 모든 주변에 여백이있다. 결국 3 열로 끝나고 각 열에는 10px 사이의 여백이 있습니다.

나열된 각 플러그인은 개인/상업적 용도로 무료로 사용하도록 라이센스되었습니다. (해당 라이센스에 대해서는 각 플러그인 참조)이므로 걱정할 필요가 없습니다.