基于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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
Js获取事件对象代码
Aug 05 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
JavaScript函数基础详解
Feb 03 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 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实现邮件群发的源码
2013/06/18 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
git进行版本控制心得详谈
2017/12/10 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python和opencv实现抠图
2018/07/18 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python3 线性回归验证方法
2019/07/09 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
解决django FileFIELD的编码问题
2020/03/30 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
2014年机关党建工作总结
2014/11/11 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书