【Javascript Demo】图片瀑布流实现-阿里云开发者社区

开发者社区> 嗯哼9925> 正文

【Javascript Demo】图片瀑布流实现

简介:
+关注继续查看

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。

 

下面是效果:

 

核心内容:

1.先设置布局

主要HTML代码如下

复制代码
<div id="container">
    <div class="box">
        <div class="content">
            <img src="../imgs/Girls/01.jpg">
        </div>
    </div>
     ...
</div>
复制代码

然后设置宽度固定,高度自适应,.box 相对布局,向左浮动:

.box { position: relative; float: left; }
.content { padding: 2px; border: 1px solid #ccc; border-radius: 2px; }
.content img { width: 234px; height: auto; }
#container { background: #fff none repeat scroll 0 0;  margin: 0 auto; width: auto; }

 

2.图片位置摆放

因为图片的高度不一致,先根据页面大小获取第一行的图片数量,然后把第二行第一个张图片放到第一行高度最低的图片下面,以此类推:

复制代码
function imgLocation() {
    var cparent = document.getElementById("container");
    //获取所有类名为box的元素
    var ccontent = getChildElement(cparent,"box");
    //第一张图片的宽度
    var imgWidth = ccontent[0].offsetWidth;
    //第一列图片数量
    var numLine = Math.floor(document.documentElement.clientWidth/imgWidth);
    //设置父容器的宽度
    cparent.style.cssText = "width:"+ imgWidth * numLine + "px";
    //获取每一张图片的高度
    var  boxHeightArr = [];
    for(var i=0;i<ccontent.length;i++){
        if(i<numLine){
            //把第一行元素的高度添加到数组中去
            boxHeightArr[i] = ccontent[i].offsetHeight;
        }else {
            //获取第一行图片高度最低的图片,然后把第二行第一种图片放在其下面,以此类推
            var minHeight = Math.min.apply(null,boxHeightArr);
            //获取最低高度图片的Index
            var minIndex = getMinHeightIndex(boxHeightArr,minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight+"px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
            //重新计算高度
            boxHeightArr[minIndex] += ccontent[i].offsetHeight;
        }
    }
}
function getMinHeightIndex(boxHeightArr, minHeight) {
    for(var i in boxHeightArr){
        if(boxHeightArr[i] === minHeight){
            return i;
        }
    }
}
function getChildElement(parent,className) {
    var contentArr = [];
    var allcontent = parent.getElementsByTagName("*");
    for(var i=0;i<allcontent.length;i++){
        if(allcontent[i].className === className){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}
复制代码

 

3.滚动加载

然后通过判断鼠标是否滑动到底部,确定是否自动加载数据。

先判断是否滑到页面底部:

复制代码
function isScrollBottom(){
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent,"box");
    //最后一张图片出现一半时的页面高度
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop + Math.floor(ccontent[ccontent.length - 1].offsetHeight/2);
    // 当前页面的高度
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
    // 鼠标滚动的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //是否允许滚动
    return (lastContentHeight < (pageHeight + scrollTop))?true:false;
}
复制代码

然后监听滚动事件,当满足加载条件时,加载图片:

复制代码
window.onscroll = function () {
    //最后一张图片出现一半时加载
    if(isScrollBottom()){
        //加载图片
        var cparent = document.getElementById("container");
        for(var i=0;i<dataImg.data.length;i++){
            var box = document.createElement("div");
            box.className = "box";
            cparent.appendChild(box);
            var content = document.createElement("div");
            content.className = "content";
            box.appendChild(content);
            var img = document.createElement("img");
            img.src = dataImg.data[i].src;
            content.appendChild(img);
        }
        //重新设置图片位置
        imgLocation();
    }
}
复制代码

 

PS:也可以通过Ajax 初始化图片HTML 代码:

复制代码
function initializeImgs() {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = handleResponse;
    xmlhttp.open("GET",url4girls,true);
    xmlhttp.send();
}
function handleResponse(e){
    //当 onreadystatechange 事件被触发后,浏览器会把一个 Event 对象传递给指定的处理函数,target 属性则会被设为与此事件关联的XMLHttpRequest
    if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //请求成功
        addImgBox(e.target.responseText);
    }
}
function addImgBox(data) {
    //解析返回的XML文件
    var imgArr = loadXMLString(data).getElementsByTagName("string");
    var cparent = document.getElementById("container");
    for(var i=0;i<imgArr.length;i++){
        var box = document.createElement("div");
        box.className = "box";
        cparent.appendChild(box);
        var content = document.createElement("div");
        content.className = "content";
        box.appendChild(content);
        var img = document.createElement("img");
        img.src = imgArr[i].innerHTML;
        content.appendChild(img);
    }
    imgLocation();
}
复制代码

 

相关文件

复制代码
index_by_javascript.html
index_by_javascript.js
index_by_javascript_ajax.html
index_by_javascript_ajax.js
yctools.js
waterfall.css
复制代码

具体可查看源码






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/6554232.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
java模拟post方式提交表单实现图片上传【转】
转自:http://blog.csdn.net/5iasp/article/details/8669644 模拟表单html如下:                                     java代码如下:   [java] view plain copy package com.
858 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4519 0
C# 模拟PrintScreen 和 Alt+PrintScreen截取屏幕图片
C# 模拟PrintScreen 和 Alt+PrintScreen截取屏幕图片 keybd_event API 函数功能:该函数合成一次击键事件。系统可使用这种合成的击键事件来产生WM_KEYUP或WM_KEYDOWN消息,键盘驱动程序的中断处理程序调用keybd_event函数。
660 0
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: &lt;div id="light" class="white_content"&gt;        &lt
2283 0
duilib corner属性的贴图技巧——让图片自动贴到控件的的某一边或者一角并自适应控件的大小
转载请说明原出处,谢谢~~          Duilib给控件贴图功能可以附带多个属性,各个属性的配合可以达到许多效果。以下是duilib支持的所有贴图属性: 贴图描述:          Duilib的表现力丰富很大程度上得益于贴图描述的简单强大。
1241 0
JAVA实现自动打开URL对应的网页并保存为图片-不借助第三方API
基本原理: JDK6u10版本以上提供了DeskTop的API接口支持,可以根据URI参数自动打开 操作系统默认的浏览器来加载对应的网页,同时借助JDK的Robot类实现自动截屏 这样就完成了对任意一个URL对应网页保存为图片。
921 0
+关注
4716
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载