html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

jquery实现瀑布流效果 jquery下拉加载新数据_javascript技巧_

[ ] 已经帮助:人解决问题

瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用jquery实现瀑布流效果的代码;3KQHTML5中文学习网 - HTML5先行者学习网

3KQHTML5中文学习网 - HTML5先行者学习网

一、页面基本排版 3KQHTML5中文学习网 - HTML5先行者学习网
1. items盒子主要用来存放我们需要摆放的数据item; 3KQHTML5中文学习网 - HTML5先行者学习网
2. tips是页面加载数据的时候用来提示用户的文本;3KQHTML5中文学习网 - HTML5先行者学习网

 <div class="wrapper">  <div class="items">   <div class="item"></div>  </div>  <p class="tips loading">正在加载...</p> </div>

二、css样式(控制提示语句摆放的位置,还有数据展示的样式)3KQHTML5中文学习网 - HTML5先行者学习网

3KQHTML5中文学习网 - HTML5先行者学习网

body {  text-align: center;  margin: 0;  padding: 0;  background-color: #F7F7F7;  font-family: '微软雅黑';}.wrapper {  padding: 50px;}img {  display: block;  width: 100%;  height: 300px;}.items {  position: relative;  padding-bottom: 10px;}.item {  width: 228px;  position: absolute;  border: 1px solid #ddd;}.tips {  width: 280px;  height: 40px;  margin: 30px auto 0;  text-align: center;  line-height: 40px;  background-color: #CCC;  border-radius: 6px;  font-size: 16px;  cursor: pointer;  position: fixed;  bottom: 0px;  left: 50%;  margin-left: -140px;  opacity: 0;  color: #666;}.tips.loading {   /*background-color: transparent;*/  background-color: #dadada;}

三、模版的引用(由于本例子中数据的展示样式都一致,在这里我引用模版artTemplate)关3KQHTML5中文学习网 - HTML5先行者学习网

1. 记得要先引入这个模版的js包;3KQHTML5中文学习网 - HTML5先行者学习网
2. 定义模版的模块要有一个id,还有设置type;3KQHTML5中文学习网 - HTML5先行者学习网
3KQHTML5中文学习网 - HTML5先行者学习网

 <script src="../js/template_native.js"></script> <script type="text/html" id="template">  <% for(var i = 0; i < items.length; i++){ %>   <div class='item'>    <img src="<%=items[i].path%>" alt="">    <p>     <%=items[i].text%>    </p>   </div>   <% } %> </script>

四、js控制瀑布流的效果 3KQHTML5中文学习网 - HTML5先行者学习网
3KQHTML5中文学习网 - HTML5先行者学习网

1. 这里,我请求了两个php分别返回了两个模拟数据;3KQHTML5中文学习网 - HTML5先行者学习网

3KQHTML5中文学习网 - HTML5先行者学习网

$(function() { //页面一加载就出现的图片,对应实际百度图片中点击搜索图片 $.ajax({  url: "./reset.php",  dataType: "json",  success: function(data) {   var obj = {    items: data   };   var result = template("template", obj);   $(".items").html(result);   waterfall();  } });});// 编写瀑布流jsfunction waterfall() { //计算出显示盒子宽度 var totalWidth = $(".items").width(); //计算出单张图片宽度(每张图片宽度是一致的) var eachWidth = $(".items .item").width(); //计算出一行能排布几张图片 var columNum = Math.floor(totalWidth / eachWidth); //将剩余的空间设置成外边距 var margin = (totalWidth - eachWidth * columNum) / (columNum + 1); //定义一个数组用来填充高度值 var heightArr = []; for (var i = 0; i < columNum; i++) {  heightArr[i] = 0; } //摆放位置 摆放在最小高度处 var elementItems = $(".items .item"); elementItems.each(function(idx, ele) {  //取得一行中高度最小值及其索引  //定义初始的最小值及其索引值  var minIndex = 0;  var minValue = heightArr[minIndex];  for (var i = 0; i < heightArr.length; i++) {   if (heightArr[i] < minValue) {    minIndex = i;    minValue = heightArr[i];   }  }  $(ele).css({   //注意点:这儿乘上的是最小值所在的索引idx   left: margin + (margin + eachWidth) * minIndex,   top: minValue  });  //重新计算高度,更新高度数组  var oldHeight = heightArr[minIndex];  oldHeight += $(ele).height() + margin;  heightArr[minIndex] = oldHeight; }); return heightArr;}$(window).on("scroll", function() { if (toBottom()) {  $(".tips").css("opacity", 1);  $.ajax({   url: "./index.php",   dataType: "json",   success: function(data) {    var dataItem = {     items: data    };    var res = template("template", dataItem);    $(".items").append(res);    waterfall();    $(".tips").css("opacity", 0);   }  }); }});//判断是否已经到底部了function toBottom() { var scrollTop = $(window).scrollTop(); var clientHeight = $(window).height(); var offsetTop = $(".items .item:last-child").offset().top; console.log(scrollTop + "..." + clientHeight + "..." + offsetTop); if (scrollTop + clientHeight > offsetTop) {  return true; } else {  return false; }}

五、最后在这里奉上的是自定义模拟数据,以及简单编写的php返回数据(别忘了,用此种方式获取数据的话,需要开启本地服务器哦~);3KQHTML5中文学习网 - HTML5先行者学习网

如下为返回数据的基本模式,如果想要定义多条数据,只要多复制几条对象就可;3KQHTML5中文学习网 - HTML5先行者学习网

[ {  "path": "./images/1.jpg",  "text": "中学时候我们班两个同学打赌,内容是在 厕所吃方便面,谁先吃完谁赢,输了的请 赢了的吃一个月的饭,于是厕所里惊现两 个货蹲坑上吃泡面,这俩货还没有决出胜 负,旁边拉屎的哥们都吐了三回了!!!" }, {  "path": "./images/2.jpg",  "text": "亲戚有许多好兄弟,平时戏称为马哥,牛哥,等等动物名。一次,有人敲门,那时他儿子尚小,一开门,对着他爸妈就说:爸爸,妈妈,驴来了!" } ...]

如下为php代码:3KQHTML5中文学习网 - HTML5先行者学习网

//reset.php<?php $jsonString = file_get_contents('info/reset.json'); $totalArr = json_decode($jsonString); echo json_encode($totalArr); ?>
//index.php 这里规定一次返回三条数据<?php $jsonString = file_get_contents('info/data.json'); $totalArr = json_decode($jsonString); $randomKeyArr = array_rand($totalArr,3); $templateArr = array(); for ($i=0; $i <count($randomKeyArr) ; $i++) {   $currentKey = $randomKeyArr[$i];   $currentObj = $totalArr[$currentKey];   $templateArr[$i] = $currentObj; } echo json_encode($templateArr); ?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。3KQHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助