基于JavaScript实现瀑布流效果


Posted in Javascript onMarch 29, 2017

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下

前端内容:

使用JavaScript和四个div,将照片放入四个div中

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .container {
   width: 1000px;
   margin: 0 auto;
   background-color: lightgray;
  }
 
  .item {
   width: 24%;
   margin-right: 10px;
   float: left;
  }
  .item img{
   width: 100%;
  }
 
 </style>
</head>
<body>
{#将内容放在container中#}
<div class="container">
{# 将图片内容放入四个item中,形成四个item#}
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 <div class="item"></div>
 
</div>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script>
 $(function () {
{#  网页加载时自动执行#}
  var obj = new ScrollImg();
  obj.fetchImg();
  obj.scrollEvent();
 })
 
{# 定义对象#}
 function ScrollImg() {
  this.nid = 0;
{#  取照片方法#}
  this.fetchImg = function () {
   var that = this
   $.ajax({
    url: '/get_imgs.html',
    type: 'GET',
{#  传输数据,已经取了多少照片,后台可以依据,继续取照片#}
    data: {'nid': that.nid},
    dataType: 'JSON',
    success: function (args) {
     if (args.status) {
      var img_list = args.data;
      $.each(img_list, function (index, obj) {
       var eqv = that.nid % 4;
       var tag = document.createElement('img')
       tag.src = '/' + obj.img_dir;
       console.log(eqv)
       $('.container').children().eq(eqv).append(tag)
       that.nid += 1;
      })
     }
    }
   })
  }
{#  监听滚动条,当滚到底部时,自动加载数据#}
  this.scrollEvent = function () {
   var that = this;
   $(window).scroll(function () {
    var srollTop = $(window).scrollTop();
    var winHeight = $(window).height();
    var docHeight = $(document).height();
    if (srollTop + winHeight >= docHeight - 2) {
     that.fetchImg();
    }
   })
  }
 }
</script>
</body>
</html>

后台内容:

基于Django的FBV,函数视图,进行数据的读取和处理ajax请求

def get_imgs(request):
 # 获取已经取得的照片数目
 index = request.GET.get('nid')
 #获取QuerySet集合对象,取从index后的10调数据
 imgs_list = models.Student.objects.values('id','img_dir','name')[index:index+10]
 imgs_list = list(imgs_list)
 # 传送状态和数据内容
 ret = {
  'status':True,
  'data':imgs_list
 }
 return JsonResponse(ret)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
May 25 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
JS变量及其作用域
Mar 29 #Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 #Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
You might like
php跨域cookie共享使用方法
2014/02/20 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
用javascript实现自定义标签
2007/05/08 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
python下载微信公众号相关文章
2019/02/26 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
python和JavaScript哪个容易上手
2020/06/23 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
个人简历自我评价
2014/01/06 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
公司2014年度工作总结
2014/12/10 职场文书
新年晚会开场白
2015/05/29 职场文书
幼儿园元旦主持词
2015/07/06 职场文书