做前端这行的 能直接贴代码就直接贴代码了，不用多说什么别的

效果需要引入jquery和jquery.masonry.min.js这两个JS

JS代码如下：

$(document).ready(function(){

	var $container = $('.space_main_con1 .con');

	var animated;

	var i=1;

	//判断是否需要 masonry.js这个里面提供动画  如果是IE浏览器并且版本低于9.0 则添加动画  否则就用 css3的动画（css3的动画代码在下面有贴出）

	$.browser.msie && $.browser.version < 9.0 ? animated = true : animated = false;

	$container.imagesLoaded(function(){

		$container.masonry({

			itemSelector: '.space_item',

			columnWidth:288,

			gutterWidth:16,//每两列之间的间隙为5像素

			isAnimated: animated,

			animationOptions: {

				duration: 400,

				easing: 'linear',

				queue: false

			}

		});

	});

	$(".space_item").live("mouseover",function(){

		$(this).addClass("on");

	})

	$(".space_item").live("mouseout",function(){

		$(this).removeClass("on");

	});

	function getMore(){

		$("#infscr-loading").show();

		var json = "json.php";

		$.getJSON(json, function(data){

			$.each(data,function(i){

				var url=data[i].url;

				var img=data[i].img;

				var user=data[i].user;

				var space=data[i].space;

				var time=data[i].time;

				var content=data[i].content;

				var simg=data[i].simg;

				var pname=data[i].pname;

				var pprice=data[i].pprice;

				html='<div class="space_item"><a class="p_img" href="'+url+' target="_blank"><img src="'+img+'" width="260" height="260" /></a><p class="author">达人：<a href="'+space+'" target="_blank">'+user+'</a></p><p class="time">发布时间：'+time+'</p><div class="arrow"></div><div class="content">'+content+'</div><div class="cfix pro_box"><a class="p_simg" target="_blank" href="'+url+'"><img src="'+simg+'" width="50" height="50" /></a><div class="p_info"><p class="p_name"><a target="_blank" href="'+url+'">'+pname+'</a></p><p class="p_price">￥'+pprice+'</p></div></div></div>';

				$boxes = $(html).css({ opacity: 0 });

				$boxes.animate({opacity:1});

				$container.append($boxes).masonry('appended',$boxes,true);

			});

			i=1;

			$("#infscr-loading").hide();

		});

	};

	//滚动到底部的时候

	$(window).bind("scroll",function(){

		if( $(document).scrollTop() + $(window).height() + $(".footer").outerHeight()-100 > $(document).height() && i==1) {

			i=0;

			getMore();

		}

	});

});

另外有一段比较好看的css3 动画效果配合[这段代码不知道是哪位大神写的 =_=感谢大神写的这么好的效果动画]

/**** 转变 ****/

.transitions-enabled .masonry,.transitions-enabled.masonry .masonry-brick{-webkit-transition-duration:0.7s;-moz-transition-duration:0.7s;-o-transition-duration:0.7s;transition-duration:0.7s;}

.transitions-enabled .masonry{-webkit-transition-property:height, width;-moz-transition-property:height, width;-o-transition-property:height, width;transition-property:height, width;}

.transitions-enabled .masonry .masonry-brick{-webkit-transition-property:left, right, top;-moz-transition-property:left, right, top;-o-transition-property:left, right, top;transition-property:left, right, top;}

/* 禁用容器上的转变 */

.transitions-enabled .infinite-scroll.masonry{-webkit-transition-property:none;-moz-transition-property:none;-o-transition-property:none;transition-property:none;}

/* 无限滚动装载机 */

#infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}

#infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}

*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}

*html #infscr-loading{position:absolute;bottom:expression(eval(document.documentElement.scrollTop));}

#page-nav{display:none;}

对应的HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>masonry结合json 制作无限滚动的瀑布流</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.masonry.min.js"></script>

</head>

<body>

<div class="space_main space_main_con1">

        <div class="con transitions-enabled infinite-scroll">

        	<div class="space_item">

                <a class="p_img" href="#" target="_blank"><img src="tmp/xinpin/n1.jpg" width="260" height="260" /></a>

                <p class="author">达人：<a href="#" target="_blank">grapecxh</a></p>

                <p class="time">发布时间：2014-12-24</p>

                <div class="arrow"></div>

                <div class="content">

                    评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容

                </div>

                <div class="cfix pro_box">

                    <a class="p_simg" target="_blank" href="#"><img src="tmp/xinpin/n1.jpg" width="50" height="50" /></a>

                    <div class="p_info">

                        <p class="p_name"><a target="_blank" href="#">商品名称商品名称商品名</a></p>

                        <p class="p_price">￥68</p>

                    </div>

                </div>

            </div>

            <!--还有更多相同如上省略了-->

        </div>

</div>

</body>

</html>

相关的另外一位大神写了一篇文章，这篇就是根据这位大神写的修改而来的  大神写的代码链接：http://my.oschina.net/mmeng/blog/73525

masonry结合json 制作无限滚动的瀑布流的更多相关文章

  1. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  3. 一个无限加载瀑布流jquery实现

    实现大概是下面的效果,写了比较详细的注释 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  4. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  5. 在 JQuery Mobile 中实现瀑布流图库布局

    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...

  6. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  7. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

  8. 瀑布流无限加载infinitescroll插件与masonry插件使用

    masonry官网地址http://masonry.desandro.com/,infinitescroll官网地址http://www.infinite-scroll.com/ 无限滚动原理:无限滚 ...

  9. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

随机推荐

  1. Google Picasa

    本博文的主要内容有 .Google Picasa的下载 .Google Picasa的安装 .Google Picasa的使用 Google 的免费图片管理工具Picasa,数秒钟内就可找到并欣赏计算 ...

  2. hdoj 2094 产生冠军

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. Cookie 和Session

    会话:  简单理解: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话要解决的问题: 每个用户与服务器进行交互的过程中,各自会有一些数据,程序 ...

  4. servlet清晰理解

    servlet介绍 Servlet看起来像是通常的Java程序.它是JSP的前身,在MVC架构中担任Controller的角色,即控制层.主要进行数据的处理操作和流程的控制,并将有关结果存储到Java ...

  5. （转）LINUX的端口和服务

    一.端口和服务的关系 端口号与相应服务的对应关系存放在/etc/services文件中,这个文件中可以找到大部分端口.使用netstat命令显示的服务名称也是从这个文件中找的.有人说将这个文件中的相应 ...

  6. cocos2d-x 3.0 final 中文显示

    cocos2d-x 3.0的中文显示非常easy,首先,你须要一个xml文件保存中文,还须要一个能显示中文的TTF文件 <?xml version="1.0" encodin ...

  7. Latex插入图片 分类： LaTex 2014-11-18 20:07 261人阅读 评论(0) 收藏

    在Latex中插入图片的方式很多,我这里只介绍自己常用的一种方式,欢迎大家指导. 我习惯于使用graphicx宏包来插入图片,有时候会配合上subfigure宏包来同时插入多幅图片组合. 首先,需要在 ...

  8. 高级性能调试手段(oprofile+gprofile)+内核追踪手段:LTT

    http://blog.csdn.net/wlsfling/article/details/5876134http://www.lenky.info/archives/2012/03/1371http ...

  9. valgrind 打印程序调用树+进行多线程性能分析

    使用valgrind的callgrind工具进行多线程性能分析 yum install valgrind / wget http://valgrind.org/downloads/valgrind-3 ...

  10. Cocos2d各版本搭建环境中的奇葩操作

    #Version: Cocos2d-x 3.4 Android 将[Cocos2d-x解压目录]\cocos\platform\android\java\src中的com,org目录拷贝覆盖到[项目根 ...