使用jQuery Masonry实现Pinterest瀑布流

jQuery Masonry下载地址：http://masonry.desandro.com/

1、基本布局

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script>
$(function(){
	$('#container').masonry({
		itemSelector : '.item'	
	});
});
</script>

<div id="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	～　省略　～
</div>

2、排列图片
使用imagesLoaded函数在图像加载完成后才开始排列图片。

<script>
$(function(){
 	var $container = $('#container');

	$container.imagesLoaded( function(){
			$container.masonry({
				itemSelector : '.item'
		});
	});
});
</script>

3、滚动动画



(1)使用JS实现动画

<script>
$(function(){
 	var $container = $('#container');

	$container.imagesLoaded( function(){
		$container.masonry({
			itemSelector : '.item',
			isAnimated : true
		});
	});
});
</script>

(2)通过CSS3实现动画

#container,
.item {
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

#container {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.item {
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -ms-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;
}

4、固定宽度

#container {
	width: 1000px;
}

5、无限滚动加载

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.item',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'The END!',
      img: '6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);

通过nav标签中的a来制定加载内容

<div id="container">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	～　省略　～
</div>
<nav id="page-nav">
	<a href="masonry06-2.html"></a>
</nav>

设置Loading图像的布局

#infscr-loading {
    margin-left: -100px;
    width: 200px;
    position: fixed;
    left: 50%;
    bottom: 10px;
    text-align: center;
}

评论

1 楼 liuweihug 2014-10-29  

jquery瀑布流插件Wookmark完整使用demo -
http://www.suchso.com/projecteactual/jquery-Wookmark-use.html