尝试瀑布流的源码

http://www.shsay.com
		
//$("#record").append("<div class=\"title\">当前测试页面完成加载。</div>");
		//$("#record").append("<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"> 						<img width=\"210\" height=\"285\" alt=\"js lazyload实现网页图片延迟加载特效\" src=\"images/pic/01.jpg\" /> 					</a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>廖俊玲</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">100000</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"js图片特效制作js焦点图上下滚动slider切换效果\" src=\"images/pic/02.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>蓝璐</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"370\" alt=\"js树形导航菜单制作垂直js导航条特效\" src=\"images/pic/03.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>郭思韵</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">0</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"flash图片导航条自动切换轮播焦点图\" src=\"images/pic/04.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>林潇潇</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"280\" alt=\"flash图片特效左右按钮控制图片折叠切换效果\" src=\"images/pic/05.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>陈卉</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div>");
	/* 	var Value = "<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"> 						<img width=\"210\" height=\"285\" alt=\"js lazyload实现网页图片延迟加载特效\" src=\"images/pic/01.jpg\" /> 					</a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>廖俊玲</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">100000</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"js图片特效制作js焦点图上下滚动slider切换效果\" src=\"images/pic/02.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>蓝璐</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"370\" alt=\"js树形导航菜单制作垂直js导航条特效\" src=\"images/pic/03.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>郭思韵</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">0</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"flash图片导航条自动切换轮播焦点图\" src=\"images/pic/04.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>林潇潇</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"280\" alt=\"flash图片特效左右按钮控制图片折叠切换效果\" src=\"images/pic/05.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>陈卉</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div>";
		var oDiv = document.getElementById("record");
		oDiv.innerHTML = Value; */
						/* var json = [{url:"1",jpg:"2"},{url:"3",jpg:"4"}];*/
						/* if (json.productFwm.length > 0) {   */
                            /*var items = [];  
  							$.each(json, function(i, shot) {
  								alert(shot.url);
  							}); */
  							
                            /* $.each(json.productFwm, function(i, shot) {
                                items.push('<article style="border-bottom: 2px solid #000000;width: 100%;">');  
                                items.push('<div class="details" ><h2>发表者:' + shot.url + '    发表时间:' + shot.jpg + '</h2></div>');  
                                //items.push('<div class="details" style="font-size:12px;">' + shot.Contents + '</div>');  
                                if (shot.Images != "") {  
                                    items.push('<a href="' + shot.Images + '" target="_blank" class="linkc"><img src="' + shot.Images + '"></a>');  
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">');
                                      
                                }  
                                items.push('<div class="details"><h2>回复数:' + shot.RepNum + '    发表时间:' + shot.Addtime + '</h2></div>');  
                                items.push('</article>');  
   
                            });  */
  
                            /* var newEls = items.join(''), tmpcontent = $(newEls);  
  
                            $wallcontent.append(tmpcontent);  
  
                            //如果你需要加载内容中包含了图片,可能需要预先加载,以避免布局元素的叠加情况,代码如下:  
                            //$wallcontent.isotope('appended', tmpcontent).isotope('reLayout');  
  
                            $wallcontent.imagesLoaded(function() {  
                                $wallcontent.isotope('appended', tmpcontent).isotope('reLayout');  
                                //加载完成后重新bind事件  
                                $showmore.text('加载更多>>').on('click', loadshots);  
                            });  
  
                            //以上代码保证生成布局前,所有图片都已经加载  
                        } else {  
                            $showmore.text('没有更多数据');  
                            //解除事件绑定  
                            $(window).unbind("scroll");  
                            return;  
                        } *///$("#record").append("<div class=\"title\">当前测试页面完成加载。</div>");
		//$("#record").append("<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"> 						<img width=\"210\" height=\"285\" alt=\"js lazyload实现网页图片延迟加载特效\" src=\"images/pic/01.jpg\" /> 					</a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>廖俊玲</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">100000</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"js图片特效制作js焦点图上下滚动slider切换效果\" src=\"images/pic/02.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>蓝璐</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"370\" alt=\"js树形导航菜单制作垂直js导航条特效\" src=\"images/pic/03.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>郭思韵</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">0</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"flash图片导航条自动切换轮播焦点图\" src=\"images/pic/04.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>林潇潇</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"280\" alt=\"flash图片特效左右按钮控制图片折叠切换效果\" src=\"images/pic/05.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>陈卉</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div>");
	/* 	var Value = "<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"> 						<img width=\"210\" height=\"285\" alt=\"js lazyload实现网页图片延迟加载特效\" src=\"images/pic/01.jpg\" /> 					</a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>廖俊玲</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">100000</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"js图片特效制作js焦点图上下滚动slider切换效果\" src=\"images/pic/02.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>蓝璐</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"370\" alt=\"js树形导航菜单制作垂直js导航条特效\" src=\"images/pic/03.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>郭思韵</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">0</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"285\" alt=\"flash图片导航条自动切换轮播焦点图\" src=\"images/pic/04.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>林潇潇</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div> 		 		<div class=\"item masonry_brick\"> 			<div class=\"item_t\"> 				<div class=\"img\"> 					<a href=\"\"><img width=\"210\" height=\"280\" alt=\"flash图片特效左右按钮控制图片折叠切换效果\" src=\"images/pic/05.jpg\" /></a> 					<span class=\"price\"></span> 					<div class=\"btns\"> 						<a href=\"\" class=\"img_album_btn\">加入专辑</a> 					</div> 				</div> 				<div class=\"title\"><span>陈卉</span></div> 			</div> 			<div class=\"item_b clearfix\"> 				<div class=\"items_likes fl\"> 					<a href=\"\" class=\"like_btn\"></a> 					<em class=\"bold\">999</em> 				</div> 				<div class=\"items_comment fr\"><a href=\"\">评论</a><em class=\"bold\">(0)</em></div> 			</div> 		</div>";
		var oDiv = document.getElementById("record");
		oDiv.innerHTML = Value; */
						/* var json = [{url:"1",jpg:"2"},{url:"3",jpg:"4"}];*/
						/* if (json.productFwm.length > 0) {   */
                            /*var items = [];  
  							$.each(json, function(i, shot) {
  								alert(shot.url);
  							}); */
  							
                            /* $.each(json.productFwm, function(i, shot) {
                                items.push('<article style="border-bottom: 2px solid #000000;width: 100%;">');  
                                items.push('<div class="details" ><h2>发表者:' + shot.url + '    发表时间:' + shot.jpg + '</h2></div>');  
                                //items.push('<div class="details" style="font-size:12px;">' + shot.Contents + '</div>');  
                                if (shot.Images != "") {  
                                    items.push('<a href="' + shot.Images + '" target="_blank" class="linkc"><img src="' + shot.Images + '"></a>');  
                                    items.push('<img src="http://etp2012.wsdict.com:8000/upload/ProductImg/329/29/c3cf4f99a1e3cab6.jpg">');
                                      
                                }  
                                items.push('<div class="details"><h2>回复数:' + shot.RepNum + '    发表时间:' + shot.Addtime + '</h2></div>');  
                                items.push('</article>');  
   
                            });  */
  
                            /* var newEls = items.join(''), tmpcontent = $(newEls);  
  
                            $wallcontent.append(tmpcontent);  
  
                            //如果你需要加载内容中包含了图片,可能需要预先加载,以避免布局元素的叠加情况,代码如下:  
                            //$wallcontent.isotope('appended', tmpcontent).isotope('reLayout');  
  
                            $wallcontent.imagesLoaded(function() {  
                                $wallcontent.isotope('appended', tmpcontent).isotope('reLayout');  
                                //加载完成后重新bind事件  
                                $showmore.text('加载更多>>').on('click', loadshots);  
                            });  
  
                            //以上代码保证生成布局前,所有图片都已经加载  
                        } else {  
                            $showmore.text('没有更多数据');  
                            //解除事件绑定  
                            $(window).unbind("scroll");  
                            return;  
                        } */

存一下源码

发布了25 篇原创文章 · 获赞 3 · 访问量 3万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章