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

效果需要引入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. Dr.com5.2 for linux

    最近安装了在ubuntu基础上改的elementaryos,很漂亮,学校提供的破linux客户端不能连上,网上常见的也是旧版本. 最后在百度Dr.com贴吧和这个帖子 http://forum.ubu ...

  2. 实现自己的脚本语言ngscript之零

    正式开始介绍前先扯点没用的. 从小玩basic长大的小朋友大多有一个梦想,就是自己实现一个basic解释器. 不过这里我实现的不是basic,而是一个语法和功能类似javascript的东西. 暂且称 ...

  3. LogMiner详细讲解

    原文地址:LogMiner 一.LogMiner的用途 日志文件中存放着所有进行数据库恢复的数据,记录了针对数据库结构的每一个变化,也就是对数据库操作的所有DML语句. 在Oracle 8i之前,Or ...

  4. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  5. Python基础知识--列表和集合

    列表:有序性,可以存放任意类型的对象,通过索引访问,可以分片操作 >>> L = ['id', 1000, 'scd', 1000, 'scd'] >>> L [' ...

  6. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable

    版权声明:本文为博主原创文章,未经博主允许不得转载. Android 仿PhotoShop调色板应用(二) 透明度绘制之AlphaPatternDrawable 这里讲一下如何实现PS调色板中的透明度 ...

  7. Java SE 6 新特性: 编译器 API

    新 API 功能简介 JDK 6 提供了在运行时调用编译器的 API,后面我们将假设把此 API 应用在 JSP 技术中.在传统的 JSP 技术中,服务器处理 JSP 通常需要进行下面 6 个步骤: ...

  8. Maven学习总结——聚合与继承

    一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1.1.聚合配置代码 1 <modules> 2 <module>模块一</module&g ...

  9. Java多线程编程<一>

    怎样做到线程安全? 1.不要跨线程共享变量: 2.使状态变量为不可变的: 3.或者在任何访问状态变量的时候使用同步 同步synchronized //静态的synchronized方法从Class对象 ...

  10. <legend>标签

    健康信息身高: 体重: 如果表单周围没有边框,说明您的浏览器太老了. <!DOCTYPE HTML> <html> <body> <form> < ...