嘗試瀑布流的源碼

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萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章