js原生滝流
119224 ワード
背景:
1、モバイル端末で開発すると、jqファイルは非常に膨大に見えるので、すべての効果はできるだけHTML 5とオリジナルjsで実現します.
2、今回の滝の流れは固定列数で、浮動しない別の滝の流れ思想を採用して実現した.
3、今回のデータソースはjsonインタフェースである
4、ワンタイム賞jsonがページデータにロードするのが肥大化していることを考慮して、本demoはクリックしてよりロードする時にデータ要求を再発行する(ajaxではない)
先に完全なdemoコードをアップロード
コードは比較的多いが,原生に勝っており,jqを要求するよりも優位である.
1、モバイル端末で開発すると、jqファイルは非常に膨大に見えるので、すべての効果はできるだけHTML 5とオリジナルjsで実現します.
2、今回の滝の流れは固定列数で、浮動しない別の滝の流れ思想を採用して実現した.
3、今回のデータソースはjsonインタフェースである
4、ワンタイム賞jsonがページデータにロードするのが肥大化していることを考慮して、本demoはクリックしてよりロードする時にデータ要求を再発行する(ajaxではない)
先に完全なdemoコードをアップロード
1 <!doctype HTML>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
5 <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
6 <meta content="telephone=no" name="format-detection"/>
7 <meta id="twcClient" content="false" name="twcClient"/>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title> demo</title>
10 <style type="text/css">
11 html{padding:0px;margin:0px auto;-webkit-text-size-adjust:none;}
12 body{background:#FFF;padding:0px;margin:0px auto;font-size:15px;color:#333;font-family:Helvetica,Microsoft YaHei,Microsoft JhengHei;}
13 a{color:#333;text-decoration:none;}
14 a:visited{color:#333;}
15 ol,ul,li,dl,dd,dt{padding:0;margin:0;list-style:none;}
16 form,p{padding:0;margin:0;}
17 i,em{font-style:normal;}
18 textarea {resize:none}
19 img{border:none;}
20 .spanclass{display:none;}
21 .body{max-width:320px;margin:0 auto;overflow:hidden;background:#eee;}
22
23 /* */
24 .waterFall {margin: 0 auto;text-align: center;width: 320px;}
25 .l-uPic{padding-top: 10px; width: 150px; display: inline-block; vertical-align: top}
26 .l-uPic li{border: 1px solid #c9c9c9;margin-bottom:10px; width: 147px; background: #fff}
27 .l-uPic li a{ display: block; position: relative;}
28 .l-uPic li img{ padding: 6px;background: #fff; vertical-align: top}
29 .l-uPic li span{ display: block; height: 28px; line-height: 28px; border-top: 1px dashed #d5d5d5; font-size: 16px; background: #f7f7f7; padding-left: 10px;}
30 .l-uPic li span em{ float: right; height: 14px; line-height: 14px; color: #fff; background: #cc6698; padding: 0 2px; font-size: 10px; margin-top: 7px; margin-right: -2px;}
31 .l-uPic li span em::before {border-width:7px; border-color:transparent #cc6698 transparent transparent; border-style: solid; width: 0; height: 0; content: ""; display: inline-block; margin-left: -16px; vertical-align: middle; margin-top: -1px;}
32 .l-uPic li .iType{ position: absolute; height: 15px; line-height: 15px; background: #090909; right: 6px; bottom: 35px; border-radius: 7px; color: #fff; font-size: 11px; padding: 0 6px;}
33 .l-uPic li .iTime{ color: #b3b3b3; text-align: right; display: block;font-size: 12px; padding:7px 3px 9px 0;}
34 .l-uPic li .iTit { display: block; font-size: 13px; padding: 0 3px 0 6px; line-height: 18px; text-align: left;}
35 .l-uPic li .iTit em{ color: #c69;}
36 .l-uPic li .iNews{ display: block; height: 17px; line-height: 17px; background: #3da7de; color: #fff; font-size: 12px; font-style: italic; width: 42px; text-align: center; margin: 4px 0 6px -5px;}
37 .l-uPic li .iNews:before{display:inline-block;content:"";position:absolute;top:-4px;left:-5px;border-style:solid;border-color:transparent transparent #2381b2 #2381b2;border-width:2px;-webkit-transform: rotate(-90deg);}
38
39 /* */
40 .btn-more{border:1px solid #d9d6d6;border-radius:5px;background:#F5F5F5;line-height:36px;margin:10px 7px;text-align:center;cursor:pointer;}
41 .btn-more a {display:block;height:36px;line-height:36px;color:#777;font-size: 14px;}
42 .btn-more a i{display:inline-block;width:0;height:0;border-width:6px;overflow:hidden;border-color:#777 transparent transparent;border-style:solid;vertical-align:middle;position:relative;top:2px;margin-left:5px;}
43 </style>
44 </head>
45 <body>
46 <div class="body">
47
48 <div id="JwaterFall" class="waterFall">
49 <ul class="l-uPic">
50 <li class="item">
51 <a href="#">
52 <i class="iNews">NEWS</i>
53 <i class="iTit"><em>[ ]</em><br/> ！ </i>
54 <i class="iTime">2013-08-07</i>
55 </a>
56 </li>
57 </ul>
58 <ul class="l-uPic">
59 <li class="item">
60 <a href="#">
61 <img src="http://dummyimage.com/135x135/ddd/79c" width="135" alt="">
62 </a>
63 </li>
64 </ul>
65
66 </div>
67 <div class="btn-more" id="Jmore"><a> <i></i></a></div>
68
69 </div>
70
71 <script type="text/javascript">
73 //
74 var jmz = {};
75 jmz.GetLength = function(str) {
76 return str.replace(/[^\x00-\xff]/g,"aa").length;
77 };
78 /**
79 * -
80 * @version 2011.05.27
81 * @author TangBin
82 * @see http://www.planeart.cn/?p=1121
83 * @param {String}
84 * @param {Function}
85 * @param {Function} ( )
86 * @param {Function} ( )
87 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
88 alert('size ready: width=' + this.width + '; height=' + this.height);
89 });
90 */
91 var imgReady = (function () {
92 var list = [], intervalId = null,
93 //
94 tick = function () {
95 var i = 0;
96 for (; i < list.length; i++) {
97 list[i].end ? list.splice(i--, 1) : list[i]();
98 };
99 !list.length && stop();
100 },
101
102 //
103 stop = function () {
104 clearInterval(intervalId);
105 intervalId = null;
106 };
107
108 return function (url, ready, load, error) {
109 var onready, width, height, newWidth, newHeight,
110 img = new Image();
111 img.src = url;
112 // ，
113 if (img.complete) {
114 ready.call(img);
115 load && load.call(img);
116 return;
117 };
118
119 width = img.width;
120 height = img.height;
121
122 //
123 img.onerror = function () {
124 error && error.call(img);
125 onready.end = true;
126 img = img.onload = img.onerror = null;
127 };
128
129 //
130 onready = function () {
131 newWidth = img.width;
132 newHeight = img.height;
133 if (newWidth !== width || newHeight !== height ||
134 //
135 newWidth * newHeight > 1024
136 ) {
137 ready.call(img);
138 onready.end = true;
139 };
140 };
141 onready();
142
143 //
144 img.onload = function () {
145 // onload onready
146 // onready
147 !onready.end && onready();
148 load && load.call(img);
149 // IE gif onload， onload
150 img = img.onload = img.onerror = null;
151 };
152
153 //
154 if (!onready.end) {
155 list.push(onready);
156 // ，
157 if (intervalId === null) intervalId = setInterval(tick, 40);
158 };
159 };
160 })();
161
162
163 var JwaterFall = document.getElementById('JwaterFall'),//
164 Jmore = document.getElementById('Jmore'),//
165 JwaterFallLeft = JwaterFall.getElementsByTagName('ul')[0],//
166 JwaterFallRight = JwaterFall.getElementsByTagName('ul')[1],//
167 pNo = 0,
168 oClick = false;
169
170 //
171 var waterFallData = {
172 index : 0,//
173 loopNum : 0,//
174 errorNum : 0,//
175 unloadNum : 0,//
176 otherHeight : 18,//
177 heightLeft : JwaterFallLeft.clientHeight,//
178 heightRight : JwaterFallRight.clientHeight,//
179 heightLeftJson : [],// json
180 heightRightJson : []// json
181 }
182
183 function append (data,num,pageCount) {
184 function appendjson() {
185 // , ,
186 if (waterFallData.loopNum + waterFallData.errorNum +waterFallData.unloadNum == num) {
187 for (var i = 0 , len=waterFallData.heightLeftJson.length; i < len ; i++) {
188 JwaterFallLeft.appendChild(waterFallData.heightLeftJson[i]);
189 }
190 waterFallData.heightLeftJson = [];
191 for (var i = 0 , len=waterFallData.heightRightJson.length; i < len ; i++) {
192 JwaterFallRight.appendChild(waterFallData.heightRightJson[i]);
193 }
194 // ,
195 waterFallData.loopNum = 0;
196 waterFallData.errorNum = 0;
197 waterFallData.heightRightJson = [];
198 if (pNo >= pageCount) {
199 Jmore.onclick = null;
200 Jmore.innerHTML = " ！";
201 }else {
202 oClick = true;
203 Jmore.innerHTML = "<a> <i></i></a>";
204 }
205 }
206 }
207
208 if (pNo > pageCount) {
209 waterFallData.unloadNum++;// +1
210 appendjson();// , ,
211 Jmore.onclick = null;
212 Jmore.innerHTML = " ！";
213 }else {
214 if(!data[waterFallData.index]){
215 waterFallData.index=0;
216 }
217 var jsonSrc = data[waterFallData.index].image,
218 jsonUrl = data[waterFallData.index].url,
219 jsonPubDate = data[waterFallData.index].pubDate,
220 jsonTitle = data[waterFallData.index].title,
221 jsonType = data[waterFallData.index].type,
222 jsonTitlen = jmz.GetLength(jsonTitle)+jmz.GetLength(jsonType);
224
225 if(jsonType !=''){
226 jsonType = '<em>['+jsonType+']</em>';
227 jsonTitlen = jsonTitlen+2;
228 }
229 imgReady(jsonSrc, function () {
230 //
231 //
232 if (this.width != 0) {
233 // item
234 var liEle = document.createElement("li");
235
236 liEle.innerHTML = '<a href="' + jsonUrl + '"><img src="' + jsonSrc + '" width="135" /><i class="iTit">'+jsonType+jsonTitle+'</i><i class="iTime">'+jsonPubDate+'</i></a>';
237 // ,
240 if (waterFallData.heightLeft > waterFallData.heightRight) {
241 waterFallData.heightRightJson.push(liEle);
242 waterFallData.heightRight = waterFallData.heightRight + 135*this.height/this.width + waterFallData.otherHeight*Math.ceil(jsonTitlen/21);
243
244 }else {
245 waterFallData.heightLeftJson.push(liEle);
246 waterFallData.heightLeft = waterFallData.heightLeft + 135*this.height/this.width + waterFallData.otherHeight*Math.ceil(jsonTitlen/21);
247 //alert("l:"+waterFallData.heightLeft)
248 }
249 }
250 waterFallData.loopNum++;
251 appendjson();// , ,
252 },function () {
253 //
254 },function () {
255 //
256 waterFallData.errorNum++;
257 });
258
259 waterFallData.index++;// +1
260 }
261 };
262
263 function callback(data) {
264 var articleList = data.articleList,
265 pageCount = data.pageCount-1,
266 leng=articleList.length;
267
268 Jmore.innerHTML = " ...";
269 for (var i = 0 , len=leng; i < len ; i++) {
270 append (articleList,leng,pageCount);
271 }
272 Jmore.onclick = function () {
273 if(oClick){
274 oClick = false;
275 this.innerHTML = " ...";
276 pNo++;
277 getDetails(pNo);
278 }else{
279 Jmore.onclick = null;
280 }
281
282 };
283 }
284
285 function getScript(url) {
286 var scr = document.createElement('script');
287 scr.src = url;
288 scr.charset = "utf-8";
289 document.body.insertBefore(scr, document.body.firstChild);
290 }
291
292 function getDetails(pNo) {
293 var url = "http://www.pclady.com.cn/3g/wap2013/intf/shouye/index_"+pNo+".html";
294 getScript(url);
295 }
296
297 document.write("<script src=\"http://www.pclady.com.cn/3g/wap2013/intf/shouye/index.html\" charset=\"utf-8\"><\/script>")
298 </script>
299
300 </body>
301 </html>コードは比較的多いが,原生に勝っており,jqを要求するよりも優位である.