Skip to content

Commit 069e1e9

Browse files
author
zhangyonghong
committed
update
1 parent 620f816 commit 069e1e9

File tree

1 file changed

+140
-104
lines changed

1 file changed

+140
-104
lines changed

‎js.md

Lines changed: 140 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -211,118 +211,154 @@ WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){
211211

212212
- 瀑布流无限加载实例
213213
```javascript
214-
// be dependent on jquery & jquery.infinitescroll.min.js
215-
// insert this '<div id="more"><a href="api?page="></a></div>' to your page.html
216-
(function($){
217-
$(function(){
218-
var $container = $('.list-wrap-gd');
219-
function layOutCallBack() {
220-
$container.imagesLoaded(function(){
221-
$container.masonry({
222-
itemSelector: '.item-bar',
223-
gutter: 10
224-
});
214+
// be dependent on jquery & jquery.infinitescroll.min.js
215+
// insert this '<div id="more"><a href="api?page="></a></div>' to your page.html
216+
(function($){
217+
$(function(){
218+
var $container = $('.list-wrap-gd');
219+
function layOutCallBack() {
220+
$container.imagesLoaded(function(){
221+
$container.masonry({
222+
itemSelector: '.item-bar',
223+
gutter: 10
225224
});
226-
$container.imagesLoaded().progress( function() {
227-
$container.masonry('layout');
228-
});
229-
}
225+
});
226+
$container.imagesLoaded().progress( function() {
227+
$container.masonry('layout');
228+
});
229+
}
230230

231-
layOutCallBack();
232-
233-
$container.infinitescroll({
234-
navSelector : "#more",
235-
nextSelector : "#more a",
236-
itemSelector : ".item-bar",
237-
pixelsFromNavToBottom: 300,
238-
loading:{
239-
img: "/images/masonry_loading.gif",
240-
msgText: ' ',
241-
finishedMsg: "<em>已经到最后一页</em>",
242-
finished: function(){
243-
$("#more").remove();
244-
$("#infscr-loading").hide();
245-
}
246-
},
247-
errorCallback:function(){
248-
$(window).unbind('.infscr');
249-
},
250-
pathParse: function (path, nextPage) {
251-
var query = "";
252-
var keyword=$("#search_keyword").val();
253-
var cat_id=$("#cat_id").val();
254-
var brand_id=$("#brand_id").val();
255-
var country_id = $("#country_id").val();
256-
query = query + "&namekeyword="+keyword;
257-
query = query +"&cat_id="+cat_id
258-
query = query + "&brand_id=" + brand_id;
259-
query = query + "&country_id=" + country_id;
260-
path = [path,query];
261-
return path;
231+
layOutCallBack();
232+
233+
$container.infinitescroll({
234+
navSelector : "#more",
235+
nextSelector : "#more a",
236+
itemSelector : ".item-bar",
237+
pixelsFromNavToBottom: 300,
238+
loading:{
239+
img: "/images/masonry_loading.gif",
240+
msgText: ' ',
241+
finishedMsg: "<em>已经到最后一页</em>",
242+
finished: function(){
243+
$("#more").remove();
244+
$("#infscr-loading").hide();
262245
}
263246
},
247+
errorCallback:function(){
248+
$(window).unbind('.infscr');
249+
},
250+
pathParse: function (path, nextPage) {
251+
var query = "";
252+
var keyword=$("#search_keyword").val();
253+
var cat_id=$("#cat_id").val();
254+
var brand_id=$("#brand_id").val();
255+
var country_id = $("#country_id").val();
256+
query = query + "&namekeyword="+keyword;
257+
query = query +"&cat_id="+cat_id
258+
query = query + "&brand_id=" + brand_id;
259+
query = query + "&country_id=" + country_id;
260+
path = [path,query];
261+
return path;
262+
}
263+
},
264264

265-
function(newElements) {
266-
var $newElems = $( newElements ).css({ opacity: 0 });
267-
$newElems.imagesLoaded(function(){
268-
$newElems.animate({ opacity: 1 });
269-
$container.masonry( 'appended', $newElems, true );
270-
layOutCallBack();
271-
});
265+
function(newElements) {
266+
var $newElems = $( newElements ).css({ opacity: 0 });
267+
$newElems.imagesLoaded(function(){
268+
$newElems.animate({ opacity: 1 });
269+
$container.masonry( 'appended', $newElems, true );
270+
layOutCallBack();
272271
});
273272
});
274-
})(jQuery);
275-
```
273+
});
274+
})(jQuery);
275+
```
276276

277-
- [iOS，Safari浏览器，input等表单focus后fixed元素错位问题](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----)
278-
```javascript
279-
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
280-
$(document).on('focus', 'input, textarea', function()
281-
{
282-
$('header').css("position", 'absolute');
283-
$('footer').css("position", 'absolute');
284-
285-
});
286-
287-
$(document).on('blur', 'input, textarea', function()
288-
{
289-
$('header').css("position", 'fixed');
290-
$('footer').css("position", 'fixed');
291-
292-
});
293-
}
277+
- [iOS，Safari浏览器，input等表单focus后fixed元素错位问题](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----)
278+
```javascript
279+
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
280+
$(document).on('focus', 'input, textarea', function()
281+
{
282+
$('header').css("position", 'absolute');
283+
$('footer').css("position", 'absolute');
284+
285+
});
294286

295-
```
287+
$(document).on('blur', 'input, textarea', function()
288+
{
289+
$('header').css("position", 'fixed');
290+
$('footer').css("position", 'fixed');
291+
292+
});
293+
}
294+
295+
```
296296

297-
- 得到地理位置
298-
```javascript
299-
function getLocation(callback){
300-
if(navigator.geolocation){
301-
navigator.geolocation.getCurrentPosition(
302-
function(p){
303-
callback(p.coords.latitude, p.coords.longitude);
304-
},
305-
function(e){
306-
var msg = e.code + "\n" + e.message;
307-
}
308-
);
309-
}
297+
- 得到地理位置
298+
```javascript
299+
function getLocation(callback){
300+
if(navigator.geolocation){
301+
navigator.geolocation.getCurrentPosition(
302+
function(p){
303+
callback(p.coords.latitude, p.coords.longitude);
304+
},
305+
function(e){
306+
var msg = e.code + "\n" + e.message;
307+
}
308+
);
310309
}
311-
```
312-
313-
- [rem计算适配](http://isux.tencent.com/web-app-rem.html)
314-
```javascript
315-
(function(doc, win){
316-
var docEl = doc.documentElement,
317-
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
318-
recalc = function(){
319-
var clientWidth = docEl.clientWidth;
320-
if(!clientWidth) return;
321-
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
322-
};
323-
324-
if(!doc.addEventListener) return;
325-
win.addEventListener(resizeEvt, recalc, false);
326-
doc.addEventListener('DOMContentLoaded', recalc, false);
327-
})(document, window);
328-
```
310+
}
311+
```
312+
313+
- [rem计算适配](http://isux.tencent.com/web-app-rem.html)
314+
```javascript
315+
(function(doc, win){
316+
var docEl = doc.documentElement,
317+
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
318+
recalc = function(){
319+
var clientWidth = docEl.clientWidth;
320+
if(!clientWidth) return;
321+
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
322+
};
323+
324+
if(!doc.addEventListener) return;
325+
win.addEventListener(resizeEvt, recalc, false);
326+
doc.addEventListener('DOMContentLoaded', recalc, false);
327+
})(document, window);
328+
```
329+
330+
- [另外一种rem方案](http://www.html-js.com/article/3041)
331+
```javascript
332+
var dpr, rem, scale;
333+
var docEl = document.documentElement;
334+
var fontEl = document.createElement('style');
335+
var metaEl = document.querySelector('meta[name="viewport"]');
336+
337+
dpr = window.devicePixelRatio || 1;
338+
rem = docEl.clientWidth * 2 / 10;
339+
scale = 1 / dpr;
340+
341+
342+
// 设置viewport，进行缩放，达到高清效果
343+
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
344+
345+
// 设置data-dpr属性，留作的css hack之用
346+
docEl.setAttribute('data-dpr', dpr);
347+
348+
// 动态写入样式
349+
docEl.firstElementChild.appendChild(fontEl);
350+
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
351+
352+
// 给js调用的，某一dpr下rem和px之间的转换函数
353+
window.rem2px = function(v) {
354+
v = parseFloat(v);
355+
return v * rem;
356+
};
357+
window.px2rem = function(v) {
358+
v = parseFloat(v);
359+
return v / rem;
360+
};
361+
362+
window.dpr = dpr;
363+
window.rem = rem;
364+
```

0 commit comments

Comments
 (0)