반응형으로 목록을 출력할때, 각 항목의 높이를 동일하게 맞추기

실제활용 : https://www.artistudy.com/shop

https://github.com/liabru/jquery-match-height 이 소스를 이용합니다.

우선 js를 로드합니다

<load target="js/jquery.matchHeight.js" />

그리고 js를 하나 작성할것인데, 방법은 두가지가 있습니다.

기본형

$(function() { $('#item').matchHeight(); });

이 경우 모든 #item 라는 속성을 가진 개체를 같은 높이로 설정합니다 (항목중 가장 큰 높이로 맞춰집니다.)

타겟 지정형

$(function() { $('#item').matchHeight({ target: $('.target') }); });

.target 이라는 속성을 가진 개체의 높이를 #item이라는 속성을 가진 개체에게 적용합니다.

작성이 완료되었으면 임의의 파일명으로 저장 후 로드합니다. 저는 flex_list.js라고 저장하겠습니다.

<load target="js/flex_list.js" />