文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

AJAX实现瀑布流布局

2023-06-08 07:28

关注

这篇文章给大家分享的是有关AJAX实现瀑布流布局的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

瀑布流是当前一种比较流行的网站界面布局方式,参差不齐的多栏布局以及到达底部自动加载的方式,使网站在视觉和用户体验上都能得到较大的提升。最早使用此布局的是国外的图片网站Pinterest,之后国内的一些图片网站也开始使用瀑布流布局,包括和Pinterest类似的花瓣网、图片社区lofter、美丽说、蘑菇街等等。

瀑布流在布局上对于大多数人来说应该是很简单的,比较只有几列而已。瀑布流最主要的还是数据的异步加载。

首先说一下这次实例所用的瀑布流式方法。瀑布流布局实现的方法很多,具体可以自行百度,此处不再赘述。本文中瀑布流实现方法为四列布局(li*4),每个图片为一个盒子(div>img+p),从后台读取数据后赋值给盒子中的元素,判定此时高度最小的列(li),然后将盒子添加到对应的列(li),之后进行下一次判定,以此类推,直至本页所有数据加载完成。

代码部分:

html+css

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>瀑布流布局</title>     <style type="text/css">       *{         margin: 0;         padding: 0;       }       ul{         width: 1200px;         margin: 0 auto;       }       ul li{         float: left;         width: 250px;         list-style: none;         margin: 20px;       }       ul li div{         width: 250px;         margin-bottom: 20px;         padding: 10px;         box-sizing: border-box;         border-radius: 5px;         box-shadow: 2px 2px 10px #919B9C;       }       ul li img{         width: 100%;         margin-bottom: 10px;       }       ul li p{         font-family: "microsoft yahei";         font-size: 14px;       }     </style>     <script src="ajax.js" type="text/javascript" charset="utf-8"></script>     <script src="pubuliu.js" type="text/javascript" charset="utf-8"></script>   </head>   <body>     <ul id="ul1">       <li></li>       <li></li>       <li></li>       <li></li>     </ul>   </body> </html>

javascript部分:ajax部分和实现部分

 function ajax(method, url, data, success) {   var xhr = null;   try {     xhr = new XMLHttpRequest();   } catch (e) {     xhr = new ActiveXObject('Microsoft.XMLHTTP');   }      if (method == 'get' && data) {     url += '?' + data;   }      xhr.open(method,url,true);   if (method == 'get') {     xhr.send();   } else {     xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');     xhr.send(data);   }      xhr.onreadystatechange = function() {          if ( xhr.readyState == 4 ) {       if ( xhr.status == 200 ) {         success && success(xhr.responseText);         console.log(xhr.responseText);       } else {         alert('出错了,Err:' + xhr.status);       }     }        } }

 ajax部分是在之前所写的Ajax工作原理以及函数的简单封装上修改而来,理解那个之后看这个基本没难度。这个相对那个来说多了一个data参数,data是用来读取数据的页码。

window.onload = function() {   //获取界面节点   var ul = document.getElementById('ul1');   var li = document.getElementsByTagName('li');   var liLen = li.length;   var page = 1;   var bool = false;   //调用接口获取数据   loadPage();//首次加载      function loadPage(){     ajax('get', 'getPics.php', 'cpage='+page, function(data) {       //将数据库中获取的数据转换成数组形式,这里要根据数据库中的数据形式来写,这里我获取到的是json形式       var data = JSON.parse(data);       //将数据写入到div中       for(var i = 0; i < data.length; i++) {         var index = getShort(li);//查找最短的li         //创建新的节点:div>img+p         var div = document.createElement('div');         var img = document.createElement('img');         img.src = data[i].preview;//img获取图片地址         img.alt = "等着吧..."         //根据宽高比计算img的高,为了防止未加载时高度太低影响最短Li的判断         img.style.height = data[i].height * (230 / data[i].width) + "px";         div.appendChild(img);         var p = document.createElement('p');         p.innerHTML = data[i].title;//p获取图片         div.appendChild(p);         //加入到最短的li中         li[index].appendChild(div);       }       bool = true;//加载完成设置开关,用于后面判断是否加载下一页     });   }      window.onscroll = function (){     var index = getShort(li);     var minLi = li[index];     var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;          if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){       //开关为开,即上一页加载完成,才能开始加载       if(bool){         bool = false;         page++;         loadPage();       }     }   }  }  function getShort(li) {   var index = 0;   var liHeight = li[index].offsetHeight;   for(var i = 0; i < li.length; i++) {     if(li[i].offsetHeight < liHeight) {       index = i;       liHeight = li[i].offsetHeight;     }   }   return index; }

这部分的功能主要是动态的将生成的div写入到页面中,其中包含对盒子样式的修改和数据的写入,数据通过ajax函数从服务器端获取。

需要注意的是:该实例的运行依赖于服务器,所以需要在本地搭建一个简单的服务器,快速搭建可以使用WampService。

下面是我们数据来源的php代码:

<?php header('Content-type:text/html; charset="utf-8"');   $cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;  $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;  $content = file_get_contents($url); $content = iconv('gbk', 'utf-8', $content);  echo $content;  ?>

什么是ajax

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。

感谢各位的阅读!关于“AJAX实现瀑布流布局”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯