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

效果需要引入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. 普通Java程序员学习使用的6个JDK内建工具

    与你的问题不同,我认为软件工程主要是用来解决问题的.有些博客认为“每个小孩都应该学习编程”,“你认为学数学只是玩玩而已?如果你有看过我的HTML5调试器的话,你会发现我是一个程序员,但我做的工作远不止 ...

  2. c\c++复习基础要点16----枚举类型

    枚举类型: 语法格式: enum 枚举类型名 {变量值列表}; 例如: enum  Weekday{sun, mon, tue, wed, thu, fri, set}; 声明了枚举类型后,就可以定义 ...

  3. unique mapped reads

    就是指唯一比对的reads 现在人们已经开始避免使用unique mapped reads这个概念了,而转向使用mapq值来保留高质量的比对结果.因为mapq值反应了一组比对结果发生的可能性,MapQ ...

  4. 【Jsoup爬取网页内容】

    思路:根据给定URL分析其源码,得到所需的网页内容的位置,制定规则采集或下载之 采集的图片和文字示例: tags: tag:brazil tag:dog tag:pet tag:pointyfaced ...

  5. 【Android - 框架】之Glide的使用

    一.Glide简介: Glide是Google官方推荐的一个图片加载和缓存的开源库,它不仅能实现平滑的图片列表滚动效果,还支持远程图片的获取.大小调整和展示,并且可以加载GIF图片.Glide相比与U ...

  6. 设置imageView正方形高宽

    private void initWidth() { int screenWidth = ((MyApplication)getApplication()).screenWidth; if(0 == ...

  7. 使用 maven:archetype 创建JSF2 + EJB3.1 + JPA2项目骨架并在JBoss WildFly 8.1上部署

    运行下面命令创建项目骨架: mvn archetype:generate -DarchetypeGroupId=org.jboss.spec.archetypes -DarchetypeArtifac ...

  8. 基于XMPP实现的Openfire的配置安装+Android客户端的实现[转]

    最近在整理一些这方面的资料,闲话少说,咱还是直奔主题吧 :) http://blog.csdn.net/sk719887916/article/details/40541163 https://git ...

  9. 轻量级的原型设计工具-Axure RP

    1. 软件下载地址: http://www.downxia.com/downinfo/25742.html 这个版本不需要注册码,不需要安装,存绿色版. 2. 基本介绍教程: http://wenku ...

  10. 11.1 afternoon

    幸运数字(number)Time Limit:1000ms Memory Limit:64MB题目描述LYK 最近运气很差,例如在 NOIP 初赛中仅仅考了 90 分,刚刚卡进复赛,于是它决定使用一些 ...