JavaScript—瀑布流

javascript瀑布流效果

javascript瀑布流效果其实javascript瀑布流前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研究了下别人写的思路,所以有了一个自己的版本代码.下面来讲讲瀑布流的思路吧! 思路:1.先计算当前屏幕或者当前容器最多能容纳几列瀑布,其计算方法为 maxCol = "Math.floor(屏幕可见区域宽度或者容器可视区宽度 / (格子宽度+间距))"; 2. 如果当前的容器没有定宽度话,…

javascript瀑布流

哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还需要图片,我会打包. 来上代码. 直接代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>哇,瀑布流啊</title> <style ty…

现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算动态生成 js部分思路注释 <script> // 1.获取父容器的宽度获取子容器的宽度算出一列放多少个,边距 // 2.通过计算盒子的高度,布局方法 // 3.瀑布流启动 //获取父容器 let itemBox=document.getElementById('itembox') //父容器宽度 let iBo…

JavaScript瀑布流代码

function osCode(){ var boxWidth = parseInt($(".item").css('width')), marginTop = parseInt($(".item").css('margin-top')), marginLeft = parseInt($(".item").css('margin-Left')), lineArr = [0,0,0], nodes = $(".item"); f…

web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript瀑布流

index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/waterfall.js"></script> <style type="text/css">…

JavaScript：实现瀑布流

一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动设置: 3.在js文件中动态实现布局,每一个滚动时,都要刷新布局. 三.思想: 实现瀑布流,就是每次当前一列的图片显示完全后,接着要显示下一列时,先找出最短的一列,然后将图片填充上,以此类推... 四.代码: waterFlow.html: <!DOCTYPE html> <html lan…

用JavaScript和jQuery实现瀑布流

▓▓▓▓▓▓ 大致介绍在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现基本结构: <div id="main"> <div class="box"> <div class="pic"><img src="images/1.jpg" alt=""></div> </div>…

JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板渲染 def img(req): img = models.Img.objects.all() return render(req,"images.html",{'img':img}) 服务端数据分发 from django import template register = templ…

从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流

未完待续...... 一.运动原理通过连续不断的改变物体的位置,而发生移动变化. 使用setInterval实现. 匀速运动:速度值一直保持不变. 多物体同时运动:将定时器绑设置为对象的一个属性. 注:物体每次运动都应该把之前的定时器清除掉. 二.边界处理遇到边界是应该停止掉还是反弹,方向相反. 改变物体运动方向:将物体的速度值取反. 三.加速减速加速:速度越来越快. 减速:速度越来越慢. 四.抛物线水平方向有一速度,垂直方向有一速度,并做自由落体. 五.透明度的变换难点:处理低版本I…

JavaScript——原生js实现瀑布流

瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道,浏览器的可视区域不尽相同,因此布局之前我们总要计算得到当前页面可以容下得列数,计算方法为:页面总宽度/图片宽度,将结果向下取整即可. 经过以上处理,我们可以得到每列高度都差不多得页面,也不至于每一列高度差距太大.另外,当我们将网页滚动到页面底部时,我们要加载出新的块放入网页,新的块布局方式仍与之前一…

使用原生javascript实现瀑布流

简介瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较好看:2-图片元素能够保持原始比例,不会被拉伸.最终浏览器中看到的效果如下图: HTML和CSS实现步骤步骤1:确定html布局,代码(部分)如下 <div id="main"> <div class="box"> <div class=…

js瀑布流原理实现揭秘 javascript 原生实现

web,js瀑布流揭秘瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说起瀑布流,其实实现原理特别简单,而且方法有很多,现在说一个大众的方法,所谓瀑布流就是一堆样式差不多的盒子排列在一起,排列规则是,插入到高度最低的那一列,所以,实现起来就很简单了,布局分块,页面分列,计算每一列的高度,然后把块插入到列高度低的那一列,设置定位,left和top值就好了. 1.从布…

用原生JavaScript实现图片瀑布流的浏览效果

学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为难度系数较低 <?php //没有数据源,利用遍历对应文件夹中的所有的图片得到的数组模拟成数据源 $arr = array(); $dir = @opendir('images'); while($file = @readdir($dir)){ if($file == '.' || $file ==…

【Javascript Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局主要HTML代码如下 <div id="container"> <div class="box"> <div class="co…

用jquery实现瀑布流案例

一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据 2.排列的方式 3.如何实现排列其实,在瀑布流里有个核心的功能就是用到了绝对定位我们逐步深入分析: 这是html的布局,css布局可以自己设置,只要保证grid盒子有绝对定位,其父元素有相对定位即可!后面有参考代码下面是script部分这种方式,可以通过for循环按照顺序获取图片的索引值,…

CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

thinphp下拉获取更多瀑布流效果

html页面 <body> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script> <div id="container" class=&q…

js瀑布流（定位法）

1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { position: relative; width: 860px; margin:…

堆糖瀑布流完整解决方案(jQuery)

2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用的YUI2.0 框架,这也是传承自上一家公司.上线后空闲下来,经历3个月的时间,逐步的切换到jQuery1.3.2(后来升级版本到1.6.1).估摸着是在2011年3月完成切换工作,那个时候瀑布流还没有兴起,堆糖网核心页面仍然是微博模式.3月底,一场基于jQuery的瀑布流开发工作由此开始.不记得开…

在 JQuery Mobile 中实现瀑布流图库布局

先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js:http://masonry.desandro.com/ 将其整合到项目中,在页面中引入. 初始化id变量,让页面每次加载时的id都不同,避免 Ajax 加载时id重复造成难以察觉的错误. var id = "gallerycontent" + Guid.NewGuid(); 采用HTML…

Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. 关于kissy uploader: Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持和常用插件,比如验证.图片预览.进度条等. 广泛应用于淘宝网,比如退款系统.爱逛街.二手.拍卖.我的淘宝.卖家中心.导…

CSS3的学习--实现瀑布流

基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/waterfall-css3 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.我们只是实现了多栏的布局. CSS 多栏(Multi-column) : http://www.w3chtml.com/css…

【JavaScript—瀑布流】的更多相关文章