zoukankan      html  css  js  c++  java
  • jQuery瀑布流

    <div id="container">
    <div class="box">
    <div class="content">
    <img src="./images/test0.jpg">
    </div>
    </div>


    $(document).ready(function(){
    $(window).on("load",function(){
    imgLocation();
    var dataimg={"data":[{"scr":"test0.jpg"},{"scr":"test1.jpg"},{"scr":"test2.jpg"},{"scr":"test3.jpg"},{"scr":"test4.jpg"},{"scr":"test5.jpg"},
    {"scr":"test6.jpg"},{"scr":"test7.jpg"},{"scr":"test0.jpg"},{"scr":"test1.jpg"},{"scr":"test2.jpg"},{"scr":"test3.jpg"},{"scr":"test4.jpg"}]};
    window.onscroll = function(){
    if(scrollside())
    {
    console.log("world world wolrd wolrd ")
    $.each(dataimg.data,function(index,value){
    var box = $("<div>").addClass("box").appendTo($("#container"));
    var content = $("<div>").addClass("content").appendTo(box);
    console.log("url"+"./images/"+$(value).attr("scr"));
    var img = $("<img>").attr("src","./images/"+$(value).attr("scr")).appendTo(content);
    });
    imgLocation();
    }
    }
    });
    });

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

    function imgLocation(){
    var box = $(".box");
    console.log("box"+box.length);
    var boxWidth = box.eq(0).width();
    var num = Math.floor($(window).width()/boxWidth);
    var boxArr = [];
    box.each(function(index,value){
    var boxHegiht = box.eq(index).height();
    if(index<num)
    {
    boxArr[index] = boxHegiht;
    }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();
    }
    });
    }
  • 相关阅读:
    Camel routes in Spring config file
    Construct a basic automation test framework
    Java custom annotations
    Java Abstract Class
    Hibernate之mappedBy
    hibernate FetchType理解
    hibernate 双向 OneToOne fetchType lazy 问题
    日常总结
    hibernate二级缓存
    sql子查询和嵌套查询
  • 原文地址:https://www.cnblogs.com/joycefan311/p/5667587.html
Copyright © 2011-2022 走看看