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

效果需要引入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. Sicily1020-大数求余算法及优化

    Github最终优化代码: https://github.com/laiy/Datastructure-Algorithm/blob/master/sicily/1020.c 题目如下: 1020. ...

  2. MySQL Server类型之MySQL客户端工具的下载、安装和使用

    本博文的主要内容有 .MySQL Server 5.5系列的下载 .MySQL Server 5.5系列的安装 .MySQL Server 5.5系列的使用 .MySQL Server 5.5系列的卸 ...

  3. ExtJs 4: How To Add Grid Cell Tooltip

    最近忙一个项目的时候需要实现鼠标移到grid的某一行上提示消息.花了半天时间才解决.在网上找很久终于有找到一个有用的.我的版本是extjs4. 效果如图 Ext.onReady(function () ...

  4. Linq to sql语法

    LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子 ...

  5. 使用FileSystemWatcher监视文件变化

    本文转载:http://www.cnblogs.com/zanxiaofeng/archive/2011/01/08/1930583.html FileSystemWatcher基础 属性: Path ...

  6. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. linux下ntfs硬盘的加载

    问题:       # mount –t ntfs /dev/sdb1 /mnt/       mount: unknown filesystem type ‘ntfs’       这是由于Cent ...

  8. Eclipse的修改编码插件使用

    最近因为编码问题,很是纠结,终于找到了一个Eclipse的修改编码插件com.lifesting.tool.encoding_1.0.0.jar,使用感觉还不错,记录一下使用方法. 第一步 将插件co ...

  9. Linux编译安装MySQL5.6

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/4311061.html ...

  10. HTTP协议基础与实验

    一. HTTP协议(Hypetext Transfer Protoacal,超文本传输协议) HTTP协议规定了Web基本的运作过程,以及Web服务器之间的通信细节. Http协议采用客户端/服务器端 ...