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

效果需要引入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. hdu 2546 典型01背包

    分析:每种菜仅仅可以购买一次,但是低于5元不可消费,求剩余金额的最小值问题..其实也就是最接近5元(>=5)时, 购买还没有买过的蔡中最大值问题,当然还有一些临界情况 1.当余额充足时,可以随意 ...

  2. lightoj 1243 - Guardian Knights 最小费用流

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...

  3. asterisk帮助与国内论坛

    http://www.in2eps.com/fo-abnf/tk-fo-abnf-http.html www.asteriskguru.com/ http://www.voip-info.org/ h ...

  4. oracle 简单SQL

    1, insert into test select * from test;(造测试数据) 2, create table b as select * from a; (创建表结构一样的空表,数据可 ...

  5. bzoj3673 bzoj3674可持久化并查集

    并查集都写不来了qwq 之前写的是错的 sz的初值都是0,这样怎么加就都是0了,水这道题还是可以,但是加强版就过不了了 #include<cstdio> #include<cstri ...

  6. AIX操作oracle

    oracle:出现下述错误,无法连接用户. ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist ...

  7. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  8. [Reactive Programming] Using an event stream of double clicks -- buffer()

    See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect doubl ...

  9. (转载)JavaScript中面向对象那点事

    鉴于自己在JavaScript这方面比较薄弱,所以就找了一本书恶补了一下(被称为犀利书的JavaScript权威指南).书的内容虽然多了点,但这也充分说明了js中的东西还是挺多的.虽然我们的定位不是前 ...

  10. SQLite查询优化性能要点

    Sqlite是轻量级的,在编译之后很小,其中一个原因就是在查询优化方面比较简单,它只是运用索引机制来进行优化的,经过对SQLite的查询优化的分析以及对源代码的研究,我将SQLite的查询优总结如下: ...