폭포수 흐름 레이아웃 및 구현 code_jquery 자동 로딩

핀터레스트가 새로운 레이아웃 방법을 사용하는데 성공한 이후, 인터넷에서는 이를 워터폴 플로우(Waterfall Flow)라고 부르는 레이아웃 트렌드가 등장했습니다. ! 인터넷에서 인기를 얻었고 해외에서 국내까지 유비쿼터스에 퍼졌습니다. 현재 중국에는 메이리숴(Meilishuo), 모구지에(Mogujie), 화반(Huaban) 등 대표적인 웹사이트가 있다.

폭포 흐름은 한동안 인기가 있었고 이제는 인터넷에 많은 플러그인이 있습니다. 사용이 매우 편리합니다. 현재 많이 사용되고 있는데, juqery 플러그인 masonry가 있습니다. 플러그인 주소는 http://masonry.desandro.com/입니다.

먼저 CSS를 사용하여 다음에서 웹페이지를 레이아웃하세요. 위에서 아래로.
사용하기 매우 편리합니다.

먼저 jquery 파일과 masonry 파일을 인용하고 다음 코드를 사용합니다.

코드 복사 코드는 다음과 같습니다.

$(function(){
var $container = $('#container');
$container .imagesLoaded( function() {
$container.masonry({
itemSelector : '.content_box',
isFitWidth: true,//// 크기 조정 가능 여부 Boolean
isRTL:false // //오른쪽에서 왼쪽으로 레이아웃 사용
})