`
rensanning
  • 浏览: 3545841 次
  • 性别: Icon_minigender_1
  • 来自: 大连
博客专栏
Efef1dba-f7dd-3931-8a61-8e1c76c3e39f
使用Titanium Mo...
浏览量:38094
Bbab2146-6e1d-3c50-acd6-c8bae29e307d
Cordova 3.x入门...
浏览量:607081
C08766e7-8a33-3f9b-9155-654af05c3484
常用Java开源Libra...
浏览量:682018
77063fb3-0ee7-3bfa-9c72-2a0234ebf83e
搭建 CentOS 6 服...
浏览量:89197
E40e5e76-1f3b-398e-b6a6-dc9cfbb38156
Spring Boot 入...
浏览量:401674
Abe39461-b089-344f-99fa-cdfbddea0e18
基于Spring Secu...
浏览量:69650
66a41a70-fdf0-3dc9-aa31-19b7e8b24672
MQTT入门
浏览量:91645
社区版块
存档分类
最新评论

使用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;
}
  • 大小: 15.1 KB
  • 大小: 9.7 KB
  • 大小: 10.1 KB
  • 大小: 2.6 MB
  • 大小: 5.1 MB
  • 大小: 65.6 KB
分享到:
评论
1 楼 liuweihug 2014-10-29  
jquery瀑布流插件Wookmark完整使用demo -
http://www.suchso.com/projecteactual/jquery-Wookmark-use.html

相关推荐

    仿Pinterest网格瀑布流响应式布局代码

    【标题】"仿Pinterest网格瀑布流响应式布局代码"是一个基于网页设计的专题,主要涉及的是前端开发中的布局技术和响应式设计。Pinterest以其独特的瀑布流布局吸引了大量的用户,这种布局方式使得图片展示更加美观且...

    php jquery json mysql实现瀑布流图片加载

    在这个项目中,我们将探讨如何使用PHP、jQuery和JSON与MySQL数据库结合来实现一个瀑布流图片加载功能。 首先,`pubuliu.sql` 文件是MySQL数据库脚本,它可能包含了创建数据库和表结构的命令,以及预填充的图片数据...

    jquery瀑布流布局插件类似于Pinterest

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,其中元素按照不规则的方式排列,类似于瀑布下落的形态,通常用于图片展示类网站,如Pinterest。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...

    基于Masonry的网格瀑布流加载动画特效

    Masonry是一款流行的JavaScript库,它提供了一种灵活的瀑布流布局方式,可以实现类似Pinterest的效果。这种布局方式能够自适应不同的屏幕尺寸,使内容在不同设备上都能保持良好的展示效果。Masonry的核心在于其能...

    jQuery无限加载瀑布流插件masonry

    jQuery Masonry 是一个非常优秀的瀑布流插件,它能够实现动态加载数据,即在用户滚动页面时自动加载更多的内容,提高用户体验。 **Masonry 插件介绍** Masonry 由 David DeSandro 开发,它允许开发者创建出灵活的...

    jQuery网页瀑布流插件masonry.zip

    总结来说,jQuery网页瀑布流插件masonry是现代网页设计中一个强大而实用的工具,它简化了复杂布局的实现,使开发者能够更专注于网站内容和用户体验的设计,而不是底层的技术实现。结合其他jQuery插件和现代前端框架...

    jQuery点击添加图片瀑布流布局效果

    4. **jQuery插件**:为了实现动态加载和瀑布流效果,可以使用第三方jQuery插件,如`jQueryPbl`。在页面加载完成后,调用插件初始化函数,例如`$("#container").masonry({})`,传入配置参数以定制行为。 5. **图片...

    Masonry图片筛选功能瀑布流布局画廊.zip

    特别是JavaScript库,如jQuery Masonry或者Pure CSS的Masonry,能够帮助开发者轻松实现瀑布流效果。在这个案例中,可能使用了Masonry库,因为它提供了强大的灵活性和性能优化,可以很好地处理元素的动态添加和删除。...

    Jquery实现瀑布流效果

    7. **插件使用**:如果你不想手动编写复杂的JavaScript代码,可以使用现成的jQuery瀑布流插件,如jQuery Masonry或Infinite Scroll。这些插件已经实现了上述功能,只需配置相应的参数即可轻松实现瀑布流效果。 在...

    Pinterest网格瀑布流布局代码.zip

    瀑布流布局,也称为Masonry布局,模仿了Pinterest网站的设计,使得图片在页面上以不规则的多列形式排列,每列的高度根据其中内容自动调整,从而形成一种动态的、视觉吸引力强的布局效果。这种布局方式尤其适合于内容...

    jquery图片自滚动瀑布流效果

    瀑布流布局,又称Masonry布局,源自Pinterest网站的设计风格,特点是每个区块根据其内容高度自适应,形成一种错落有致的视觉效果。在jQuery实现中,通常会通过监听窗口的滚动事件,动态加载和布局图片,以实现平滑的...

    Masonry瀑布流插件 3.2.1.zip

    Masonry是一款jQuery网格布局(瀑布流)插件,可以实现类似Pinterest模式的砌体布局效果。通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样。这个库还可以作为jQuery插件使用,帮助你轻松实现这种效果。...

    jQuery淡入淡出瀑布流效果.zip

    而瀑布流布局,又称为Masonry布局,源自于Pinterest网站,它的特点是将页面元素按列自适应地排列,每列的高度根据内容自动调整,形成一种错落有致的视觉效果。 jQuery淡入淡出瀑布流效果的实现主要分为以下几个步骤...

    jquery瀑布流

    在jQuery中实现瀑布流,通常会借助插件如jQuery Masonry或者Infinity Scroll。 jQuery Masonry是jQuery的一个插件,它允许开发者创建动态的网格布局。这种布局可以根据屏幕大小和内容的变化进行自我调整,使得页面...

    瀑布流布局 WaterfallLayout

    瀑布流布局,也被称为Masonry布局或Pinterest布局,是一种常用于网页和移动应用中的展示大量图像或内容的方式。它的特点是内容以多列的形式排列,每一列的高度不固定,随着页面滚动,新内容会自然地填充到列的底部,...

    Jquery瀑布流图片无限展示源码免费下载

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示,尤其是像Pinterest这样的社交网络。这种布局的特点是容器内的元素根据浏览器窗口大小动态调整排列方式,形成一种自适应、多列且每列高度不...

    主要实现了使用瀑布流插件滚动图片.zip

    瀑布流布局,也被称为Masonry布局,是一种网页布局方式,常用于图片展示,尤其是像Pinterest这样的社交网络。这种布局的特点是容器内的元素不规则地排列,如同瀑布一样自上而下流动,每列的高度根据其内容自动调整。...

    jQuery Masonry瀑布流插件使用详解

    总的来说,jQuery Masonry是一个强大的工具,它简化了创建瀑布流布局的过程,使得开发者无需深入研究复杂的CSS布局技术,就能轻松实现富有吸引力的网格展示效果。在实际项目中,结合其丰富的API和灵活性,Masonry能...

Global site tag (gtag.js) - Google Analytics