jQuery Masonry Waterfall 흐름 레이아웃에 대한 자세한 설명

이 글은 주로 jQuery Masonry Waterfall 레이아웃 아티팩트의 사용을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

최근 웹사이트를 만들 때 사진 레이아웃이 많이 포함된 부분이 있었는데, 좀 더 대중적인 Water Flow 레이아웃을 사용하고 싶었습니다.

처음에는 제가 직접 썼는데, 이미지 크기를 확인할 생각이 없었습니다. 레이아웃 효과를 얻을 수는 있지만 일부 이미지는 크기가 상대적으로 작지만 강제로 확대됩니다. 매우 조화롭지 않아 보입니다. 나중에 온라인으로 검색해 보니 아주 좋은 Water Flow 레이아웃 도구가 있다는 걸 알게 됐어요. 이 아티팩트에 대해 알아볼까요~
아티팩트 이름: JQuery Masonry, URL: http://masonry.desandro.com/index.html

사용 방법은 아주 간단합니다:

1. 및 배치해야 하는 항목

Masonry는 유사한 구조의 하위 요소를 로드하기 위한 컨테이너가 필요합니다.

<p id="container"> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 <p class="item">...</p> 
 ... 
</p>

그런 다음 페이지에 Jquery 및 Masonry 스크립트 참조를 추가합니다. 이때 jquery 버전은 1.6+

입니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="/path/to/jquery.masonry.min.js"></script>

2. CSS 작성

배치해야 하는 모든 요소의 크기는 CSS에 의해 결정되며 모든 요소는 부동이어야 합니다.
예:

.item { 
 width: 220px; 
 margin: 10px; 
 float: left; 
}

3. 스크립트

초기화 레이아웃 매개변수를 전달하는 스크립트를 작성하면 컨테이너가 자동으로 레이아웃됩니다.
itemSelector 및 columnWidth 매개변수를 구성하는 것이 좋습니다. 더 많은 매개변수 구성을 보려면 공식 웹사이트를 확인하세요.

$(function(){ 
 $('#container').masonry({ 
  // options 
  itemSelector : '.item', 
  columnWidth : 240 
 }); 
});

알겠습니다. 바로 그거예요. 참 쉽죠~

효과를 볼까요

관련 추천:

jQuery.lazyload+masonry 개선된 이미지 워터폴 플로우 code_image 특수 효과

jQuery Masonry Waterfall 플로우 플러그인 사용법 상세설명_jquery

폭포 흐름 레이아웃의 JS 구현 사례 분석

위 내용은 jQuery Masonry Waterfall 흐름 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!