关闭顶部展开顶部

绝对定位:JS照样实现瀑布流式布局_建站经验教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:从搜索营销过程找营销效果提升关键
通过搜索引擎进行营销,成为越来越多企业的营销手段,营销市场确实很大,可能否从中分一杯羹呢?

  一夜之间 似乎互联网上出现了一种类似瀑布形式的网页布局,如美丽说、蘑菇街等网站都采用这种布局形式。常见的实现方法一般分为:传统多列浮动 、CSS3 定义、绝对定位。 笔者看到网上仅仅有关于CSS的详细教程,未见有绝对定位的相关教程。现在想和各位朋友们分享一下绝对定位的应用及具体代码,希望朋友们能够指出其中的不足之处。

  

 

  JS的绝对定位分解成三个部分代码,这样清晰,方便查看代码,其中包括: Javascript代码、HTML代码、[AJax封装文件 代码。

 [Javascript]代码

<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript">

window.onload=function()

{

        var oDiv =document.getElementById("div");

        var oUl=document.getElementsByTagName("ul");

        window.onscroll=function()

        {

                var clientH=document.documentElement.clientHeight;

                var scrollH=document.documentElement.scrollTop||document.body.scrollTop;

                for(var i=0;i<oUl.length;i++)

                {

                        var aLi=oUl[i].getElementsByTagName("li")

                        var lastL=aLi[aLi.length-1];

                        if(toTop(lastL)<clientH+scrollH)

                        {

                                ajax("a.js",function(str)

                                {

                                        var json = eval('('+str+')')

                                        for(var i=0;i<json.list.length;i++)

                                        {

                                                var list=json.list[i];

                                                for(var j=0;j<list.src.length;j++)

                                                {

                                                        var oLi=document.createElement("li")

分享:云数据-租用香港服务器有哪些优点呢?
现在企业间的竞争十分的激烈。因此不论是大型企业还是小型企业都采用建设属于自己网站的方式来进行自己的产品宣传以及公司形象传播! 但是,对于一些还在创业期的企业来说,建设一个网站往往就是一件比较麻烦而且比较复杂的事情!因为建设一个网站就需要有自己的独立服

共4页上一页1234下一页
来源:模板无忧//所属分类:建站经验教程/更新时间:2013-04-17
loading.. 评论加载中....
相关建站经验教程
闂佹眹鍩勯崹閬嶆偤閺囶澁缍栭柛鈩冪⊕閳锋帗銇勯弴妤€浜惧銈忕秶閹凤拷
濠电偛顕慨顓㈠磻閹炬枼妲堥柡鍌濇硶婢ф稒淇婇懠顒夆偓婵嬫煟閵忊晛鐏查柟鍑ゆ嫹
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径瀣閻庣懓瀚竟鍡欐崲娑斾線鏌i姀鈺佺伈闁瑰嚖鎷�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径濠勵吋闂佽鍨庨崟顓фК闂佽閰eḿ褍螞濞戙垺鍋夐柨鐕傛嫹
闂備胶枪缁绘劙骞婃惔銊ョ劦妞ゆ帒鍊哥敮鍫曞箹鐎涙ḿ鐭掔€规洘绻堥弫鎾绘晸閿燂拷
闂備胶枪缁绘劙骞婃惔銊ョ劦妞ゆ巻鍋撻柛姘儑缁﹪鏁傞崜褏鐓撻柣搴岛閺呮繈鎯屽▎鎴犵=濞撴艾锕ョ€氾拷
闂備浇銆€閸嬫挻銇勯弽銊р槈闁伙富鍣i弻娑樷攽閹邦亞鑳虹紓浣靛妽濡炶棄顕i妸鈺婃晬婵炲棙鍨电粭锟犳⒑閸濆嫬鈧骞婇幘鑸殿潟闁跨噦鎷�
闂備礁鎼崯鐗堟叏妞嬪海绀婂鑸靛姈閻擄綁鎮规潪鎷岊劅婵炲眰鍊曢湁闁挎繂妫欑粈鈧梺鍛娚戦悧鐘茬暦閹扮増鏅搁柨鐕傛嫹
婵犵妲呴崹顏堝礈濠靛棭鐔嗘俊顖氬悑鐎氱粯銇勯幘瀵哥畺閻庢熬鎷�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓奸崶銊ヮ伕濡炪倖鎸荤换鍐偓姘虫珪娣囧﹪顢涘Δ鈧晶鍙夌節椤喗瀚�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎规洦鍓熼、娆撳礂閻撳簶鍋撻悽鍛婄厸闁割偅绻勫瓭婵犳鍣幏锟�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾闁哄苯鎳橀崺鈧い鎺嗗亾闁宠閰i獮鎴﹀箛闂堟稒顔嗛梻浣告惈鐎氭悂骞忛敓锟�
婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎规洩缍侀獮瀣攽閸偂绱�
濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓兼径濠勭厬闂佺懓鐡ㄧ换鍕敂鐎涙ü绻嗘い鏍殔婢у弶绻濋~顔藉
闂佽楠搁崢婊堝礈濠靛鍋嬮柟鎯版閻鈹戦悩鎻掓殭闁奸潧缍婇弻銈夋嚍閵夈儱顫嶉梺缁樼壄缂嶄礁鐣峰▎鎾存櫢闁跨噦鎷�
UB闂備礁婀辩划顖炲礉濡ゅ懐宓侀柛銉㈡櫆鐎氭岸鎮楀☉娅虫垿锝為敓锟�
闂備浇澹堟ご绋款潖婵犳碍鐒鹃悗鐢电《閸嬫捇鐛崹顔句痪濠电姭鍋撻柨鐕傛嫹
闂佽楠哥粻宥夊垂閸濆嫸鑰块柛銏㈠殰
闂備礁鎲″缁樻叏妞嬪海绀婂璺虹灱閸楁碍绻涢崱妤€顒㈤柛鐐差槹缁绘稓绱欓悩鍝勫帯闂佺ǹ楠忛幏锟�
缂傚倸鍊烽悞锕傛偡閿曞倸鍨傛繝濠傚椤╅攱銇勯幒宥囶槮缂佹彃婀遍埀顒傚仯閸婃繄绱撳棰濇晩闁跨噦鎷�
©2017 www.mb5u.com婵犵妲呴崹顏堝礈濠靛棭鐔嗘慨妞诲亾鐎殿噮鍣i幃鈺呭箵閹烘挸鐦�
闂備浇銆€閸嬫捇鏌熼婊冾暭妞ゃ儻鎷�&闂備礁鎲$敮鎺懳涢弮鍫燁棅闁跨噦鎷�