基于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中ajax调用json数据的使用说明
Mar 17 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
js实现旋转的星空效果
Nov 01 Javascript
JavaScript 去重和重复次数统计
Mar 31 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/01/03 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
关于react中组件通信的几种方式详解
2017/12/10 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
用Python进行websocket接口测试
2020/10/16 Python
python二维图制作的实例代码
2020/12/03 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
分厂厂长岗位职责
2013/12/29 职场文书
2014高考励志标语
2014/06/05 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
安阳殷墟导游词
2015/02/10 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python