快捷搜索:
您的位置:AG真人平台下注 > 时尚资讯 > 实现思路,是比较流行的一种网站页面布局

实现思路,是比较流行的一种网站页面布局

2019-12-04 08:19

 

图形地方的投放

思路如下:

  • 规定每排能够放的图样个数
  • 得到每张图片的莫斯中国科学技术大学学
  • 赢得最小的可观
  • 分明图片的职分
  • 进展排放
    学学的点:
  • var minH = Math.min.apply(null,colH);
    apply(卡塔尔 的作用是改造奉行的奉行情形。
    说是数组 colH 未有min这几个措施,不过Math对象足以求最小值,有min那些艺术
    比方 var a = Math.min(3,2,1,4卡塔尔(قطر‎,那么a将赋值为1
    colH想利用Math对象的min方法,就供给使用call/apply来改造实行情状了。
    Math.min(3,2,1,4)等价于 Math.min.apply(null, [3,2,1,4]卡塔尔,null是上下文,传入的靶子对应函数中的this,min函数并从未选拔this,由此这里可感到null,[3,2,1,4]是给min函数的参数列表。
  • $.isArray(卡塔尔国函数用于剖断钦赐参数是或不是是一个数组。
  • $.inArray(卡塔尔(قطر‎方法相似于JavaScript的原生.indexOf(卡塔尔方法,没有找到相配成分时它回到-1。即使数组第一个因素相配value(参数) ,那么$.inArray(卡塔尔国再次来到0。
  • jquery.inarray(value,array)
    规定第三个参数在数组中的地方(若无找到则赶回 -1 卡塔尔。
  • $(window卡塔尔.height(卡塔尔(英语:State of Qatar) //是获取当前 也正是你浏览器所能见到的页面包车型大巴那有些的万丈 这几个尺寸在你缩放浏览器窗口大小时 会改换与document是分歧等的 依照英语应该也能明白啊
  • Math.floor(卡塔尔//小于等于 x,且与 x 近年来似的整数。向下取整

现实的代码如下所示:

$(document).ready(function(){
    $(window).on("load",function(){
            imgLocation();
    });
})
function imgLocation(){
    var box = $(".box");
    var boxWidth = box.eq(0).width();
    var num = Math.floor($(window).width()/boxWidth);
    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();
        }
    });
}
<!DOCTYPE html>
<html>
<head>
    <title>瀑布流</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="../jquery/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="waterFall.css">
</head>
<body>
<div id="main">
<div class="pin">
    <div class="box">
        <img src="#" alt="img1" style="background-color: #03c03c;" width="200" height="300">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img2" style="background-color: #03c03c;" width="200" height="400">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img3" style="background-color: #03c03c;" width="200" height="350">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img4" style="background-color: #03c03c;" width="200" height="200">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img5" style="background-color: #03c03c;" width="200" height="400">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img6" style="background-color: #03c03c;" width="200" height="100">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img7" style="background-color: #03c03c;" width="200" height="330">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img8" style="background-color: #03c03c;" width="200" height="200">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img9" style="background-color: #03c03c;" width="200" height="450">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img10" style="background-color: #03c03c;" width="200" height="500">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img11" style="background-color: #03c03c;" width="200" height="200">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img12" style="background-color: #03c03c;" width="200" height="100">
    </div>
</div>

<div class="pin">
    <div class="box">
        <img src="#" alt="img13" style="background-color: #03c03c;" width="200" height="300">
    </div>
</div>
</div>
<script type="text/javascript" src="waterFall.js"></script>
</body>
</html>

滚动加载

达成思路:

  • 认清——当前容器的可观 滚动间距>最终一张图纸的冲天的八分之四
    var lastboxHeight = box.last().get(0).offsetTop Math.floor(box.last().height()/2);
    var documentHeight = $(document).width();
    var scrollHeight = $(window).scrollTop();
    return (lastboxHeight<scrollHeight documentHeight)?true:false;
  • 假如上叙为真,则加载数据,这里涉及到JSON的知识
  • 这里运用的是json的文化,也就动态的获取数据
var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};

任何代码如下:

$(document).ready(function(){
    $(window).on("load",function(){
            imgLocation();
            var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"1.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
            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);
                        console.log("images/" $(value).attr("src"));
                        $("<img>").attr("src","images/" $(value).attr("src")).appendTo(content);
                    });
                    imgLocation();
                }
            };
    });
})

function scrollside(){
    var box = $(".box");
    var lastboxHeight = box.last().get(0).offsetTop Math.floor(box.last().height()/2);
    var documentHeight = $(document).width();
    var scrollHeight = $(window).scrollTop();
    return (lastboxHeight<scrollHeight documentHeight)?true:false;
}

function imgLocation(){
    var box = $(".box");
    var boxWidth = box.eq(0).width();
    var num = Math.floor($(window).width()/boxWidth);
    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();
        }
    });
}

要么有bug,最终不能加载出来,生无可恋の

HTML:

布局

HTML代码如下:

        <div class="container">
            <div class="box">
                <div class="content">
                     ![](images/1.jpg)
                </div>
            </div>
            <div class="box">
                <div class="content">
                     ![](images/1.jpg)
                </div>
            </div>
        </div>

CSS代码如下:

        *{
            padding: 0;
            margin: 0px;
        }
        .box{
            position: relative;
            float: left;
        }
        .content{
            padding: 10px;
            border:1px solid #ccc;
            box-shadow: 0 0 5 #ccc;
            border-radius: 5px;
        }
        .content img{
            width: 190px;
            height: auto;
        }

瀑布流的行使:

  瀑布流对于图片的表现,是快捷而具备吸重力的,客商一眼扫过的连忙阅读方式能够在短期内获取更加多的新闻量,而瀑布流里懒加载方式又防止了客户鼠标点击的翻页操作,瀑布流的要紧特征就是有次序,定宽而不定高的考虑让页面分歧于古板的矩阵式图片结构格局,奇妙的接纳视觉层级,视野的自由流动又化解了视觉疲劳,相同的时候给人以不拘风流倜傥格的以为,切知命之年轻生龙活虎族的特性化心绪。[1] 国内类Pinterest网址也如不可胜举般冒出,已知网址超40家,类Pinterest网址有三种,一是电子商务引导购物,如想去网、香信街和赏心悦目说、好享说、依托于天猫商城平台;二是兴趣图谱分享,如知美、花瓣等;三是在划分垂直领域,如针对吃货的零食控、针对家居行当的她部落等。四是时装样式设计资源信息平台如看潮网等等。

CSS:

 

  

何为瀑布流:

*{
    margin: 0;
    padding: 0;
}

#main{
    position: relative;
}

.pin{
    padding: 15px 0 0 15px;
    float: left;
}

.box{
    padding: 5px;
    border-color: 1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    border-radius: 5px;
}

style="font-family: "Microsoft YaHei"">通用类:豆瓣市场,花瓣网,作者欢悦,读图知天下
style="font-family: "Microsoft YaHei"">美人图片:图丽网
style="font-family: "Microsoft YaHei"">时尚资源消息类:看潮网
style="font-family: "Microsoft YaHei"">风尚购物类:厚菇街,美貌说,人人逛街,卡当网
style="font-family: "Microsoft YaHei"">品牌推广类:凡客达人
style="font-family: "Microsoft YaHei"">家居o2o类:新巢网小猫家
和讯社交类: 都爱看
style="font-family: "Microsoft YaHei"">好笑图片类:道趣儿
style="font-family: "Microsoft YaHei"">艺术收藏类:微艺术
style="font-family: "Microsoft YaHei"">洋气图像和文字分享:荷都分享网

落实代码:

选用案例:

jQuery达成瀑布流效果

  瀑布流,又称瀑布流式布局。是相比流行的风流倜傥种网址页面结构,视觉显示为长短不一的多栏布局,随着页面滚动条向下滚动,这种构造还有也许会无休无止加载数据块并附加至近年来尾部。最初接收此构造的网址是Pinterest,慢慢在境内风靡开来。国内超多清新站基本为那类风格。

$(document).ready(function(){
    $(window).on("load", function(){
        imgLocation();
        var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};                                             
        // 获取最后一张图片距离顶端的高度   它本身高度的一半
        $(window).scroll(function() {                       
            if(getSideHeight()){
                $.each(dataImg.data, function(index, value){
                    var pin = $("<div>").addClass('pin').appendTo('#main');
                    var box = $("<div>").addClass('box').appendTo(pin);
                    var img = $("<img>").attr('src', 'images/'   $(value).attr("src")).appendTo(box);
                });
                imgLocation();
            }
        });

    });
});

//获取最后一张图片的高度
function getSideHeight(){
    var box = $("pin");
    var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
    var documentHeight = $(document).height();          //获取当前窗口的高度
    var scrollHeight = $(window).scrollTop();           //获取滚动的距离
    return (lastImgHeight < documentHeight   scrollHeight) ? true:false;
}

//图片位置摆放
function imgLocation(){
    var box = $(".pin");                                //返回一个数值
    var boxWidth  = box.eq(0).width();                  //每张图片的宽度
    var num = Math.floor($(window).width()/boxWidth);   //一行能放的图片的个数
    var numArr = [];
    box.each(function(index, value){
        var boxHeight = box.eq(index).height();         //获取每张图片的高度
        if(index < num){                                 //第一排
            numArr[index] = boxHeight;
        }
        else{                                           //第二排
            var minboxHeight = Math.min.apply(numArr,numArr);
            var minIndex = $.inArray(minboxHeight, numArr);
            $(value).css({
                position: "absolute",
                top: minboxHeight,
                left: box.eq(minIndex).position().left
            });
            numArr[minIndex]  = box.eq(index).height(); //新高度
        }
    });
}

jQuery:

图片 1

落实效果与利益:

本文由AG真人平台下注发布于时尚资讯,转载请注明出处:实现思路,是比较流行的一种网站页面布局

关键词: ag真人 前端 web jQuery css