windowonload=function(){
waterfall();
windowonscroll=function(){
var parent=documentgetElementById("main");
var boxs=getByClass(parent,"box");
var scrollH=documentdocumentElementscrollTop||documentbodyscrollTop;
var documentH=scrollH+documentdocumentElementclientHeight;
var lastH=boxs[boxslength-1]offsetTop+Mathfloor(boxs[boxslength-1]offsetHeight/2);
/763/
if(lastH-350<documentH){ //这里的lastH不减掉350,就无法进入if语句???
/465/
dataInt={"data":[{"src":"1jpg"},{"src":"2jpg"},{"src":"3jpg"},{"src":"7jpg"},{"src":"4jpg"},{"src":"5jpg"},{"src":"6jpg"}]};
for(var i=0;i<dataIntdatalength;i++){
var divB=documentcreateElement("div");
divBclassName="box";
parentappendChild(divB);
var divP=documentcreateElement("div");
divPclassName="pic";
divBappendChild(divP);
myimg=documentcreateElement("img");
myimgsrc="/images/"+dataIntdata[i]src;
divPappendChild(myimg);
}
waterfall();
}
}
}
function waterfall(){
var oParent=documentgetElementById("main");
var boxs=getByClass(oParent,"box");
var boxW=boxs[0]offsetWidth;
var num=Mathfloor(documentdocumentElementclientWidth/boxW);
oParentstylecssText="width:"+boxWnum+"px;margin:0 auto;";
boxHarr=new Array();
for(var i=0;i<boxslength;i++){
if(i<num){
boxHarrpush(boxs[i]offsetHeight);
}else{
var minH=Mathminapply(null,boxHarr);
var minHindex=getminHindex(boxHarr,minH);
boxs[i]styleposition="absolute";
boxs[i]styletop=minH+"px";
boxs[i]styleleft=minHindexboxW+"px";
//boxs[i]styleleft=boxs[minHindex]offsetLeft+"px";
boxHarr[minHindex]=boxHarr[minHindex]+boxs[i]offsetHeight;
}
}
}
function getByClass(parent,clsName){
a=parentgetElementsByTagName('');
var arr=[];
for(var i=0;i<alength;i++){
if(a[i]className==clsName){
arrpush(a[i]);
}
}
return arr;
}
function getminHindex(arr,minH){
for(var i in arr){
if(arr[i]==minH)
return i;
}
}
这个你可以换种思路,用一个变量来控制显示样式,官网上面也有说。当这个变量为true时,说明有这个样式,当变量为false时则没有这个样式。
>
用v-on指令或者@监听DOM事件,并在触发时运行一些JavaScript代码;
参考:JS,Vue2,介绍,与Vue3区别,MVVM设计模式,模板语法,数据绑定
Vue中的事件修饰符:
1、prevent:阻止默认事件(常用);
2、stop:阻止事件冒泡(常用);
3、once:事件只触发一次(常用);
4、capture:使用事件的捕获模式;
5、self:只有eventtarget是当前 *** 作的元素时才触发事件;
6、passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
Vue中常用的按键别名:
回车 => enter、删除 => delete (捕获“删除”和“退格”键)、退出 => esc、空格 => space、换行 => tab (特殊,必须配合keydown去使用)、上 => up、下 => down、左 => left、右 => right等。
代码案例
模板内的表达式是非常便利的,用于简单的运算。当其过长或逻辑过于复杂时,会难以维护,因此,当遇到复杂的逻辑时应该使用计算属性,用computed计算属性。
代码案例
通过watch来响应数据的变化。
代码案例
class样式,写法:class="xxx" ,其中xxx可以是字符串、对象、数组。
1、字符串写法适用于:类名不确定,要动态获取。
2、对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
3、数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
style样式,写法::style="{fontSize: xxx}",其中xxx是动态值;:style="[a,b]"其中a、b是样式对象。
代码案例
以上就是关于vue里,我用jq去获取元素的offsettop出现问题全部的内容,包括:vue里,我用jq去获取元素的offsettop出现问题、vue 判断元素是否有class、JS,Vue2,事件处理,计算属性,监视属性,class与style绑定等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)