使用jQuery Masonry实现Pinterest瀑布流

最新推荐文章于 2025-04-24 14:32:51 发布

wayne_ren

最新推荐文章于 2025-04-24 14:32:51 发布

阅读量162

点赞数

分类专栏： JavaScript 文章标签： jQuery Pinterest ViewUI

本文链接：https://blog.csdn.net/wayne_ren/article/details/84254153

版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了jQuery Masonry的基本布局、排列图片、滚动动画、固定宽度及无限滚动加载功能，并详细解释了各功能的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery Masonry下载地址：[url=http://masonry.desandro.com/]http://masonry.desandro.com/[/url]

[b]1、基本布局[/b]

[img]http://dl.iteye.com/upload/attachment/0071/0776/bc200a5a-b862-3877-b2ce-e648ed8dfdbb.gif[/img]

[img]http://dl.iteye.com/upload/attachment/0071/0779/c9d19ad1-be43-3488-8e79-9c4d62c5670a.gif[/img]

<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>

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

[img]http://dl.iteye.com/upload/attachment/0071/0791/bc49de5e-712c-3f74-b264-f875459c33ad.gif[/img]

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

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

[b]3、滚动动画[/b]

[img]http://dl.iteye.com/upload/attachment/0071/0786/6a21a269-4300-30a1-b958-130728703745.gif[/img]

[b](1)使用JS实现动画[/b]

<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;
}

[b]4、固定宽度[/b]

[img]http://dl.iteye.com/upload/attachment/0071/0784/5b4a609f-df08-32ab-92b0-c55d186d89d3.gif[/img]

#container {
	width: 1000px;
}

[b]5、无限滚动加载[/b]

[img]http://dl.iteye.com/upload/attachment/0071/0788/b0191174-4092-307a-b8ba-c3d89708207b.gif[/img]

$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 ); 
    });
  }
);

[b]通过nav标签中的a来制定加载内容[/b]

<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>

[b]设置Loading图像的布局[/b]

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