原生JavaScript+LESS实现瀑布流
HTML(注意包裹关系,方便js调用)
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
</div>
</body>
LESS(less预编译)
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}
JavaScript(自己理解的注解)
(函数存在一定瑕疵,仅用于学习理解)
window.onload = function () {
waterfall("main","box");
//调用自定义函数;作用于main下的每一个box元素;
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
//模拟json数据;
window.onscroll = function () {
if (checkScrollSlide) {
//调用自定义函数;根据函数返回值确定滚动是否超出范围;
var oParent = document.getElementById("main");
for (var i = 0; i < dataInt.data.length; i++) {
var oBox = document.createElement("div");
oBox.className = "box";
oParent.appendChild(oBox);
//创建box块
var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
//创建pic块
var oImg = document.createElement("img");
//创建img元素
oImg.src = "images/"+dataInt.data[i].src;
//设置图片引用;
oPic.appendChild(oImg);
};
waterfall("main","box");
//将动态生成的数据块进行流式布局;
};
};
};
//流式布局主函数,自动调整数据块的位置;
function waterfall (parent,box) {
//将main下的所有box元素取出;"parent"代表父级,box代表box元素;
var oParent = document.getElementById(parent);
//将父级元素赋值给变量oParent;
var oBoxs = getByClass(oParent,box);
//通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;
//再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);
// console.log(oBoxs.length);
//在控制台中打印出box元素的数量,用于调试;
var oBoxW = oBoxs[0].offsetWidth;
//计算出每一列的宽度;offsetWidth包含内边距在内的宽度;
// console.log(oBoxW);测试;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//计算整个页面显示的列数(页面宽/box的宽);
oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
//父元素main的宽度=每一列的宽*列数;并且左右居中;
var hArr = [];
//存放每一列高度的数组;
for (var i = 0; i < oBoxs.length; i++) {
//遍历oBoxs数组;
if (i<cols) {
//这里符合条件的是第一行的每列的第一个;
hArr.push(oBoxs[i].offsetHeight);
//得出每一列的高度放入数组中;
}else{
//这里的box元素已经不是第一行的元素了;
var minH = Math.min.apply(null,hArr);
//得出第一行的最小高度并赋值给变量;
// console.log(minH);
var index = getMinhIndex(hArr,minH);
//调用自定义函数获取这个变量的index值;
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH+"px";
oBoxs[i].style.left = oBoxW*index+"px";
//设置当前元素的位置;
//当前元素的left值=顶上的元素的index值*每列的宽度;
//oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
//第二种获取当前元素的left值;
//此时在第index列添加了一个box元素;
hArr[index]+=oBoxs[i].offsetHeight;
//每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;
};
};
};
//js原生通过Class获取元素;
function getByClass (parent,claName) {
//通过class获取元素;(在父级parent的容器下获取claName的元素;)
var boxArr = new Array();
//声明数组,用来存储获取到的所有class为box的元素;
var oElements = parent.getElementsByTagName("*")
//声明变量用来存储此父元素下的所有子元素(*);
for (var i = 0; i < oElements.length; i++) {
//遍历数组oElements;
if (oElements[i].className==claName) {
//如果数组中的某一个元素的calss类与参数claName相同;
boxArr.push(oElements[i]);
//则把遍历到的这个box元素归类到boxArr数组;
};
};
return boxArr;
//调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;
};
//获取数组元素的index值;
function getMinhIndex (arr,val) {
//arr是父级数组;val是当前元素;
for(var i in arr){
//从0开始遍历;
if(arr[i]==val){
//找到当前元素在数组中对应的index值;
return i;
//函数返回值即是当前元素的index值;
};
};
};
//检测是否具备了滚动加载数据块的条件;
function checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//浏览器滚动条滚动的距离;
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//浏览器视口的高度;
// console.log(height);
return (lastBoxH<scrollTop+height)?true:false;
//页面滚动的距离是否大于最后一个box元素的offsetTop;
};
总结：
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。
然后进入下一个循环插入下一行。
相关推荐
-
原生JS实现响应式瀑布流布局
原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http://leozdgao.github.io/demo/responsive_waterfall/ 演示图: 核心代码: responsive_waterfall.js (function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProper
-
javascript自适应宽度的瀑布流实现思路
这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和
-
基于JavaScript实现瀑布流布局
本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="
-
js实现的美女瀑布流效果代码
瀑布流以及回顶部的效果 *{ margin:0; padding:0; } h1{ text-align:center; height:100px; } body{ background-color:RGB(232,231,226); } .all{ margin:0 auto; width:1000px; } .number{ float:left; width:225px; } .content { margin:5px; background-color:white; } img{ mar
-
js实现瀑布流的一种简单方法实例分享
下面奉上一则用JS实现瀑布流的方法,望批评. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><
-
纯js实现瀑布流展现照片(自动适应窗口大小)
用瀑布流来展现照片再好不过了,下面是瀑布流(每一行的长度等于浏览器窗口的长度)的一种实现方式,也可以用css3实现,很简单,谷歌一下你就知道. 我的思路大概是一张一张的图片插入,当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环,即这一行插入进去了. 然后进入下一个循环插入下一行.公式很简单,假设这一行当前的高度为h,则插入一张高和宽为(x,y)的图片时,满足下列关系: h' * (w / h + y / x) = w w是浏览器窗口的宽度, 则 h' = w / (w / h
-
基于JavaScript实现瀑布流布局(二)
本文实例讲解了JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head
-
解析瀑布流布局:JS+绝对定位的实现
绝对定位方式的瀑布流布局: 一.布局 1.包围块框的容器: 复制代码 代码如下: <div id="main"> ... ...<div> 2.一个块框: 复制代码 代码如下: <div class="pin"> <div class="box"> <img src="./images/g (1).jpg"/> </div>
-
详解javascript实现瀑布流绝对式布局
瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流. 一.绝对式布局: JS实现原理 其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元
-
原生JavaScript实现瀑布流布局
本文实例讲解了原生JavaScript实现瀑布流布局详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: window.onload=function(){ waterfall('main','pin'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ if(checkscrollside()){