基于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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
javascript parseInt 大改造
Sep 27 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 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多用户计数器代码
2007/03/11 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python项目打包成二进制的方法
2020/12/30 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
汽车装潢店创业计划书范文
2014/02/05 职场文书
公司总经理岗位职责
2014/03/15 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
小学生安全演讲稿
2014/04/25 职场文书
市级文明单位申报材料
2014/05/07 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript