HTML代码:

<div id="content">
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/01.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/02.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="">
<a href="###"><img src="data:images/03.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/04.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/05.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/06.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/07.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/08.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/09.jpg" alt="" /></a>
</div>
</div>
<div class="box">
<div class="imgBox">
<a href="###"><img src="data:images/10.jpg" alt="" /></a>
</div>
</div>
</div>

CSS样式:

*{ margin:; padding:;}
body{ background-color:#f2f2f2;}
#content{ padding: 10px 0px; margin:0 auto; position:relative;}
.box{ padding:10px; width:310px; height:auto; float:left;}
.imgBox{ border:solid 1px #dcdcdc; width:310px;}
.imgBox img{ width:310px; height:auto;}

JS代码:

window.onload=function(){
setPosition('content','box');
//通过json字符串模拟加载内容
var imgArray={'date':[{'src':'05.jpg'},{'src':'06.jpg'},{'src':'07.jpg'},{'src':'08.jpg'}]} //滚动到页面底部(最后一张图片的顶部)时开始加载json内容
window.onscroll=function(){
if(getFlag()){ //判断是否滚动到最后一张
var oContent=document.getElementById('content'); //获取外部容器
for(var i=0;i<imgArray.date.length;i++){
var oDiv=document.createElement('div');
oDiv.className='box';
oContent.appendChild(oDiv);
var oImgDiv=document.createElement('div');
oImgDiv.className='imgBox';
oDiv.appendChild(oImgDiv);
var oImg=document.createElement('img');
oImg.src='images/'+imgArray.date[i].src;
oImgDiv.appendChild(oImg);
}
setPosition('content','box');
}
}
} //元素排列
function setPosition(parents,content){
var oContent=document.getElementById('content'); //获取外部容器
var aBox=getByClass(oContent,content); //获取classname为box的元素集合
var oneWidth=aBox[0].offsetWidth; //获取单个box的宽度
var docWidth=document.documentElement.clientWidth||document.body.clientWidth; //获取窗口可视区域宽度
var num=Math.floor(docWidth/oneWidth);
oContent.style.width=num*oneWidth+'px'; //设置外部容器的宽度
var result=[];
for(var i=0;i<aBox.length; i++){
if(i<num){
result[i]=aBox[i].offsetHeight; //判断是否为第一行,然后把第一行中每个aBox的高度存入定义的result数组中
}else{
var minHeight=Math.min.apply(null,result); //获取result数组中最小的值
var minIndex=getIndex(result,minHeight); //获取result数组中最小值的索引
aBox[i].style.position='absolute';
aBox[i].style.top=minHeight+10+'px';
aBox[i].style.left=aBox[minIndex].offsetLeft+'px';
result[minIndex]=result[minIndex]+aBox[i].offsetHeight;
}
}
}
//获取当前索引值
function getIndex(parents,name){
for(var i=0;i<parents.length;i++){
if(parents[i]==name){
return i;
}
}
}
//通过class选取元素方法
function getByClass(oParent,name){
var result=[];
var aArr=oParent.getElementsByTagName('*');
for(var i=0; i<aArr.length; i++){
if(aArr[i].className==name){
result.push(aArr[i]);
}
}
return result;
}
//判断是否滚动到最后
function getFlag(){
var oContent=document.getElementById('content');
var aBox=getByClass(oContent,'box');
var lastTop=aBox[aBox.length-1].offsetTop;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var scorllTop=document.documentElement.scrollTop||document.body.scrollTop;
if((clientHeight+scorllTop)>lastTop){
return true;
}else{
return false;
}
}

javascript实现瀑布流效果(固定宽度)的更多相关文章

  1. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  2. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  3. css基础之 图片瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果 (一)

    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...

  4. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  5. web页面和小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...

  6. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  8. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  9. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

随机推荐

  1. FIFO的使用场景

    (1) 数据的缓冲.如模型图所示,如果数据的写入速率高,但间隔大,且会有突发;读出速率小,但相对均匀.则通过设置相应深度的FIFO,可以起到数据暂存的功能,且能够使后续处理流程平滑,避免前级突发时,后 ...

  2. 在List中删除符合条件的内容

    objDAList.RemoveAll(s => s.daCID == "20170725152407CD");

  3. LeetCode:12. Roman to Integer (Easy)

    1. 原题链接 https://leetcode.com/problems/roman-to-integer/description/ 2. 题目要求 (1)将罗马数字转换成整数:(2)范围1-399 ...

  4. Percona-Tookit工具包之pt-find

      Preface       We used to use "find" command in linux or AIX when we need to get a certai ...

  5. 【个人训练】(POJ3279)Fliptile

    最近在刷kuangbin神犇的各种套题....感觉自己好弱啊.....还是要多多训练,跟上大神的脚步.最近的这十几题都比较水,记下来这一条我比较印象深刻.也比较难的题目吧(之后应该不会再有水题写了,珍 ...

  6. 基于阿里云服务器Linux系统部署JavaWeb项目

    前段时间刚完成一个JavaWeb项目,想着怎么部署到服务器上,边学边做,花了点时间终于成功部署了,这里总结记录一下过程中所遇到的问题及解决方法.之所以选择阿里云,考虑到它是使用用户最多也是最广泛的云服 ...

  7. ES6 export,import报错

    问题描述: 现有两个文件: profile.js const firstName = 'Michael'; const lastName = 'Jackson'; const year = 2018; ...

  8. Web负载均衡技术

    Web负载均衡(Load Balancing),简单地说就是给我们的服务器集群分配“工作任务”,而采用恰当的分配方式,对于保护处于后端的Web服务器来说,非常重要. 负载均衡的策略有很多,我们从简单的 ...

  9. DFS(6)——hdu1342Lotto

    一.题目回顾 题目链接:Lotto Sample Input 7 1 2 3 4 5 6 7 8 1 2 3 5 8 13 21 34 0 Sample Output 1 2 3 4 5 6 1 2 ...

  10. 望岳物业App开发过程记录

    望岳物业APP开发过程记录 ——杜冰青 1.小组讨论,决定模块功能. 2.开始做“社区活动”界面,完成主页面.分享界面.内容界面,但是分享功能暂时没有完成. 3.接着做“一键开门”界面,因为硬件设施跟 ...