当前位置:千赢国际官网 > 千赢网页手机版登入 > frame概述及案例应用,javascript自适应宽度的瀑布

frame概述及案例应用,javascript自适应宽度的瀑布

文章作者:千赢网页手机版登入 上传时间:2019-08-03

引用方法top
该变量永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。

1:nextSibling属性
该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。
需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:
先来看一个例子:

图片 1

parent
该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。
附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系

复制代码 代码如下:

这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网、美丽说等等。而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea。

Windwo对象→Parent对象→Frame对象→Document对象→Form对象,如下:
parent.frame1.document.forms[0].elements[0].value;
在JS中:window.location(window.location.href)和window.top.location(window.top.location.href)是一样的意思 可以通过top来调用任何一个frame,因为top指的是最外层的frameset,可以调用它里面的任何一个子元素frame。如:top.outterFrame1.location和top.innerFrame2.location等。

<body>
<div>
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />
<input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />
</div>
</bod

OK,现在进入正题。这里主要介绍瀑布流的一种实现方法:绝对定位(css) javascript ajax json。简单一点如果不做滚动加载的话就是绝对定位(css) javascript了,ajax和json是滚动加载更多内容的时候用到的。

parent指的是当前窗口(frame)的父窗口(frameset)可以调用它里面的任何一个子元素frame。如:parent.innerFrame1.location和parent.innerFrame2.location等。

该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。
IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。
opera和safari对nextSibling的处理方式与FF一致

下面是实现思路

复制代码 代码如下:

2:previousSibling属性
该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

1、计算页面的宽度,计算出页面可放数据块的列数(如上图所示就有6列)。

<html>
<head>
<title>top frame parent示例</title>
<script language="javaScript" type="text/javaScript">
window.location.href="";
</script>
</head>
<frameset id="outFrameset" rows="150,*,150" cols="*" border="5">
<frame name="frameName1" id="frameId1" src="a.html">
<frameset id="inFrameset" cols="150,*" rows="*">
<frame name="innerFrameName1" id="innerFrameId1" src="a.html">
<frame name="innerFrameName2" id="innerFrameId2" src="a.html">
</frameset>
<frame name="frameName2" id="frameId2" src="a.html">
</frameset>
</html>

3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

2、将各个数据块的高度尺寸记入数组中(需要等所有图片加载完成,否则无法知道图片的高度)。

您可能感兴趣的文章:

  • JS获取scrollHeight问题想到的标准问题
  • js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
  • js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
  • js获取height和width的方法说明
  • 利用JS解决ie6不支持max-width,max-height问题的方法
  • js中的preventDefault与stopPropagation详解
  • js中top的作用深入剖析
  • window.top[_CACHE]实现多个jsp页面共享一个js对象
  • JS获取iframe中marginHeight和marginWidth属性的方法
  • JS中完美兼容各大浏览器的scrolltop方法
  • js中不同的height, top的区别对比

一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType来获知其标签类型,然后,如果该nextSibling.nodeName

#text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。

您可能感兴趣的文章:

  • nextSibling
  • 只能是字母或数字或者是字母和数字的组合的正则previousSibling
  • javascript nextSibling 与 getNextElement(node) 使用介绍
  • javascript中的nextSibling使用陷(da)阱(keng)
  • javascript中的previousSibling和nextSibling的正确用法

4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5、当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放(列数随页面宽度而改变,因而需要重新排放)。

6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

思路有了,然后就是如何用代码实现。当然,如果看完以上的6个步骤你已经知道如何实现,那么下面的内容大可不必细看。

首先在页面上写好基本的HTML和CSS(为方便起见,CSS就不外联了),代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>瀑布流布局</title>
<style type="text/css">
body{margin:0; font-family:微软雅黑;}
#flow-box{margin:10px auto 0 auto; padding:0; position:relative}
#flow-box li{
width:190px; position:absolute; padding:10px; border:solid 1px #efefef; list-style:none;
opacity:0;
-moz-opacity:0;
filter:alpha(opacity=0);
-webkit-transition:opacity 500ms ease-in-out;
-moz-transition:opacity 500ms ease-in-out;
-o-transition:opaicty 500ms ease-in-out;
transition:opaicty 500ms ease-in-out;}
#flow-box li img{width:100%;}
#flow-box li a{display:block; width:100%; text-align:center; font-size:14px; color:#333; line-height:18px; margin-top:10px; text-decoration:none;}
.loadwrap{position:absolute; left:0; width:100%; text-align:center;}
</style>
</head>
<body>
<ul id="flow-box">
<li><img src="" /><a href="#">图片标题1</a></li>
<li><img src="" /><a href="#">图片标题2</a></li>
<li><img src="" /><a href="#">图片标题3</a></li>
<li><img src="" /><a href="#">图片标题4</a></li>
<li><img src="" /><a href="#">图片标题5</a></li>
<li><img src="" /><a href="#">图片标题6</a></li>
<li><img src="" /><a href="#">图片标题7</a></li>
<li><img src="" /><a href="#">图片标题8</a></li>
<li><img src="" /><a href="#">图片标题9</a></li>
<li><img src="" /><a href="#">图片标题10</a></li>
<li><img src="" /><a href="#">图片标题11</a></li>
<li><img src="" /><a href="#">图片标题12</a></li>
<li><img src="" /><a href="#">图片标题13</a></li>
<li><img src="" /><a href="#">图片标题14</a></li>
<li><img src="" /><a href="#">图片标题15</a></li>
<li><img src="" /><a href="#">图片标题16</a></li>
<li><img src="" /><a href="#">图片标题17</a></li>
<li><img src="" /><a href="#">图片标题18</a></li>
<li><img src="" /><a href="#">图片标题19</a></li>
<li><img src="" /><a href="#">图片标题20</a></li>
</ul>
<div id="loadimg" class="loadwrap"><img src="Images/load.jpg" /></div>
</body>
</html>

以上代码非常简单,可以看出页面最初将会先加载20个数据块。值得一提的是在CSS里面定义了opacity为0,目的是在数据块未排放好之前先隐藏起来,排放好后再将opacity设为1显示出来,另外这里用了css3的transition做一点体验上的升级;还有一点就是可以看到页面底部有一个id为“loading”的DIV,用来表示数据正在加载中。下面开始用JS实现以上思路(6个步骤)。

1、计算页面的宽度,计算出页面可放数据块的列数

复制代码 代码如下:

<script type="text/javascript">
function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距,mh是水平距离,mv是垂直距离
var w = document.documentElement.offsetWidth;//计算页面宽度
var ul = document.getElementById("flow-box");
var li = ul.getElementsByTagName("li");
var iw = li[0].offsetWidth mh;//计算数据块的宽度
var c = Math.floor(w / iw);//计算列数
ul.style.width = iw * c - mh "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中
}
</script>

注释写得非常明白,这一步不说应该都很容易懂。

2、将各个数据块的高度尺寸记入数组中

复制代码 代码如下:

<script type="text/javascript">
function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距,mh是水平距离,mv是垂直距离
//... 省略上一步的部份代码 ...
ul.style.width = iw * c - mh "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中

var liLen = li.length;
var lenArr = [];
for (var i = 0; i < liLen; i ) {//遍历每一个数据块将高度记入数组
lenArr.push(li[i].offsetHeight);
}
}
</script>

由于数据块里面含有图片,也没有给定图片的尺寸,所以需要等待图片加载完成后方可获取其高度;那么可以在window.onload的时候调用flow方法。代码变成:

复制代码 代码如下:

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:frame概述及案例应用,javascript自适应宽度的瀑布

关键词: 千赢国际官网