基于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 技巧大全(新手入门篇)
May 12 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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
2006/12/13 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript 写类方式之二
2009/07/05 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python打印输出数组中全部元素
2018/03/13 Python
解读python logging模块的使用方法
2018/04/17 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
详解python编译器和解释器的区别
2019/06/24 Python
python可视化实现KNN算法
2019/10/16 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
大学四年规划书范文
2013/12/27 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
新手上路标语
2014/06/20 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL