基于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 相关文章推荐
js实现表格字段排序
Feb 19 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 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
我的论坛源代码(八)
2006/10/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
遗传算法之Python实现代码
2017/10/10 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
学生会离职感言
2014/02/11 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
Python开发简易五子棋小游戏
2022/05/02 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python
MySQL自定义函数及触发器
2022/08/05 MySQL