开发者社区> 嗯哼9925> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【jQuery 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 box = $(".box");
    var boxWidth = box.eq(0).width(); //获取第一张图片的宽度
    var num = Math.floor($(window).width()/boxWidth); //确定一排能放多少张图片
    var container = num * boxWidth+"px";
    $("#container").css("max-width",container);
    var boxArr = []; //获取盒子高度
    box.each(function (index, value) {
        var boxHeight = box.eq(index).height();
        if(index < num){
            boxArr[index] = boxHeight;
        }else {
            var minboxHeight = Math.min.apply(null,boxArr); //获取最小高度
            var minboxIndex = $.inArray(minboxHeight,boxArr);
            //通过位置进行摆放
            $(value).css({
                "position":"absolute",
                "top":minboxHeight,
                "left":box.eq(minboxIndex).position().left
            });
            //重新计算高度
            boxArr[minboxIndex] += box.eq(index).height();
        }
    });
}
复制代码

 

3.滚动加载

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

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

复制代码
function scrollSide() {
    var box = $(".box");
    var lastBoxHeight = box.last().get(0).offsetTop + Math.floor( box.last().height()/2);
    // 当前页面的高度
    var documentHeight = $(window).height();
    // 鼠标滚动的高度
    var scrollHeight = $(window).scrollTop();
    return (lastBoxHeight < (scrollHeight + documentHeight))?true:false; //是否允许滚动
}
复制代码

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

复制代码
        //监听鼠标监听事件
        window.onscroll = function () {
            //最后一张图片出现一半时加载
            if(scrollSide()){
                $.each(dataImg.data,function (index, value) {
                    var box = $("<div>").addClass("box").appendTo($("#container"));
                    var content = $("<div>").addClass("content").appendTo(box);
                    $("<img>").attr("src",$(value).attr("src")).appendTo(content);
                });
                imgLocation();
            }
        };
复制代码

 

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

复制代码
//初始化图片
function initializeImgs() {
    $.ajax({
        type:'GET',
        url:url4girls,
        dateType:'xml',
        success:function (data) {
            addImgBox(data);
        }
    });
};

function addImgBox(data) {
    var arr = $(data).find('string');
    $.each(arr,function (index, value) {
        var box = $("<div>").addClass("box").appendTo($("#container"));
        var content = $("<div>").addClass("content").appendTo(box);
        $("<img>").attr("src",$(value).text()).appendTo(content);
    });
    imgLocation();
}
复制代码

 相关文件

复制代码
index_by_jQuery.html
index_by_jQuery.js
index_by_jQuery_Ajax.html
index_by_jQuery_Ajax.js
waterfall.css
jquery-3.1.1.min.js
复制代码





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

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

相关文章
基于 jQuery 实现的精致作品集图片导航效果
  今天,我们要用 jQuery 来创建一个作品集图像的导航模板。我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览。任一箭头或当前图像下方的小盒子可以作为导航使用。     在线演示     下载源码   您可能感兴趣的相关文章 网站开发中很有...
655 0
分享8款精美的jQuery图片播放插件
本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究。废话不多说了,直接上这些插件。 1、3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦。
951 0
Croppic – 免费开源的 jQuery 图片裁剪插件
  Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData  对象,所以目前只支持 IE 10+、Chrome 和 Firefox 等现代浏览器。
793 0
TwentyTwenty – 使用 jQuery 实现图片对比功能
  这是一款非常棒的图片对比工具,能够方便的应用到你的网站中。其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果。 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 HTML Inspec...
659 0
基于jquery的图片展示--卡牌翻转效果
原文 http://www.cnblogs.com/daynow/archive/2013/04/29/3051233.html   卡牌翻转效果是一种很好玩的效果,是我用Jquery实现的一种效果,跟Flash实现的效果几乎一模一样。
885 0
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
  图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你。
1257 0
[转贴]使用jQuery自动缩图片 - [jQuery]
具体思路: 通过具体容器取得容器内所有图片 循环检查所有图片长宽 对超过的图重新定高度. 直接写成一个扩展好了,以后可以直接用. jquery.fn.ImageAutoSize = function(width,height){    $("img",this).
701 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
23-Vue.js在前端...1506518547.pdf
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载