2. 程式人生 > >實現瀑布流佈局的幾種方法

實現瀑布流佈局的幾種方法

阿新 • • 發佈：2019-01-26

本文分別用原生JS與JQ框架寫出瀑布流佈局的方法
首先引庫：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>我的瀑布佈局</title>
  <!--<script src="js/waterfall-jx.js"></script>-->
  <script src="js/ku/jquery.min.js"></script>
  <script src="js/ku/jquery-2.1.4.min.js"
 
></script>
  <script src="js/waterfall-jq.js"></script>
  <link href="css/waterfall-jx.css" rel="stylesheet">
</head>

<body>
  <div id="main">
  </div>
</body>

</html>

CSS:

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

JavaScript程式碼：

window.onload = function () {
    waterfall('main', 'pad');
}

function waterfall(parent, box) {
    var
 
 oparent = document.getElementById(parent);
    var obox = getClass(oparent, box);
    var colWidth = obox[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / colWidth);
    oparent.style.cssText = 'width:' + cols * colWidth + 'px;margin:0 auto';
    var colHeight = new Array();
    for (var i = 0; i < obox.length; i++) {
        if (i < cols) {
            colHeight.push(obox[i].offsetHeight);
        }
        else {
            var colMin = Math.min.apply(null, colHeight);
            var index = getMinIndex(colHeight, colMin);
            obox[i].style.position = 'absolute';
            obox[i].style.top = colMin + 'px';
            obox[i].style.left = index*colWidth+'px';
            colHeight[index]+=obox[i].offsetHeight;
        }
    }

}
//得到所有class為clsName的parent子專案
function getClass(parent, clsName) {
    var boxarr = new Array(),
        child = parent.getElementsByTagName('*');
    for (var i = 0; i < child.length; i++) {
        if (child[i].className == clsName)
            boxarr.push(child[i]);
    }
    return boxarr;
}

//獲得最小高度值box的index
function getMinIndex(h,min) {
    for (var i in h) {
        if (h[i] == min) {
            return i;
        }
    }
}

以下為JQuery方法的實現：

$(function(){
    var json = {"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},
                        {"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},
                        {"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},
                        {"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},
                        {"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},
                        {"src":"15.jpg"}]};
    $.each(json.data,function(i,value){
        var aPad = $("<div>").addClass("pad").appendTo($("#main"));
        var aPic = $("<div>").addClass("pic").appendTo($(aPad));
        $("<img />").attr('src','images/'+$(value).attr('src')).appendTo($(aPic));
    });
});

window.onload = function () {

    //獲得列數
    var pW = $(window).width();
    var boxW = $(".pad").outerWidth();
    var num = Math.floor(pW/boxW);

    //獲取第一行高度
    var lh = [];
    $(".pad").each(function(i,value){
        if(i<num)
        lh[i] = $(this).outerHeight();
        //操作第2+行
        else{
            var min = Math.min.apply(null,lh);
            var minIndex = $.inArray(min,lh);
            $(this).css({
                'position' : 'absolute',
                'top' : min + 'px' ,
                'left': minIndex*boxW + 'px',
            });
            lh[minIndex] = $(this).outerHeight()+min;
        }
    });

}

求大神指點一二。

相關推薦

實現瀑布流佈局的幾種方法

本文分別用原生JS與JQ框架寫出瀑布流佈局的方法 首先引庫： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的瀑

談談實現瀑布流佈局的幾種思路

最近遇到這麼一個需求，需要在手機上做一個兩列的瀑布流佈局，後來就把這個問題研究了一下，做個記錄。 一般來講，這種佈局可以分為兩種情況： 圖片的數量是一定的，不需要頁面滾動到底部時，再動態載入圖片，只需要將圖片排成若干列 圖片的數量的不定的，頁面觸底時，需要從遠端載入圖片。 前者使用css的方法即可解決，後

DIV實現垂直居中的幾種方法

水平居中 好的 parent 間接 z-index -c 實現 解決 ble 說道垂直居中，我們首先想到的是vertical-align屬性，但是許多時候該屬性並不起作用。例如，下面的樣式並不能達到內容垂直居中顯示 1 div { 2 width:200px;

javascript實現異步的幾種方法(一)

.com 順序 單線程 -s .html done 耦合 ogr nbsp 你可能知道，Javascript語言的執行環境是"單線程"（single thread）。 所謂"單線程"，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執行後面一個任

css實現垂直居中的幾種方法

定位 方法 cell 方式 middle ali ddl 顯示 內容 方法1、這個方法把一些 div 的顯示方式設置為表格，因此我們可以使用表格的 vertical-align 屬性。 #wrapper { //代表父元素 display: table; }

C#中實現並發的幾種方法的性能測試

返回 也不會 thead syn image 9.png 結果 次數 存在 原文地址：https://www.cnblogs.com/durow/p/4837746.html 0x00 起因 去年寫的一個程序因為需要在局域網發送消息支持一些命令和簡單數據的傳輸，所以寫了

純CSS實現垂直居中的幾種方法

right lin 兼容 bar 實現 syntax info pro ems 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方法1：

【JS】深拷貝與淺拷貝的區別，實現深拷貝的幾種方法

如何區分深拷貝與淺拷貝，簡單點來說，就是假設B複製了A，當修改A時，看B是否會發生變化，如果B也跟著變了，說明這是淺拷貝，拿人手短，如果B沒變，那就是深拷貝，自食其力。 此篇文章中也會簡單闡述到棧堆，基本資料型別與引用資料型別，因為這些概念能更好的讓你理解深拷貝與淺拷貝。 我們來舉個淺拷貝例

js中實現跨域的幾種方法

js中幾種實用的跨域方法原理詳解 這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通訊，比如用ajax向一個不同的域請求資料，或者通過js獲取頁面中不同域的框架中(iframe)的資料。只要協議、域名、埠有任何一個不同，都被當作是不同的域。 下表給出了相對http://sto

jq實現瀑布流佈局

效果圖： 可以看到，除了第一行，接下來的圖片都是新增在高度最低的那一列下面。 因此我用了一個數組heightArr存放每一列的高度，每次選擇高度最低的那列進行插入，隨後更新當行列的高度。 css： .box{ position: relative;

基於JavaScript實現瀑布流佈局

1、html+css+js程式碼： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

java實現動態編譯的幾種方法

所謂動態編譯，就是在程式執行時產生java類，並編譯成class檔案。 import java.io.BufferedReader; import java.io.InputStream; im

js實現延遲載入的幾種方法

js的延遲載入有助與提高頁面的載入速度，以下是延遲載入的幾種方法： 使用setTimeout延遲方法的載入時間 延遲載入js程式碼，給網頁載入留出更多時間 <script type="text/javascript" > function A(){

jQuery 實現瀑布流佈局及下滑載入頁面

蘑菇街商品的資訊，一個接一個，銜接緊密，根據瀏覽器大小有幾列，元素等寬不等高，向下滑動載入 就是常見的瀑布流佈局， 實現瀑布流佈局有三種方式，JavaScript原生，jQuery，和CSS3 column方法。 我寫了JavaScript 和jQuery兩種。 jQu

純CSS實現瀑布流佈局

首先一個頁面的佈局<div id="container-pro"> <div class="waterfall"> <div class="item"><img src="img/1.jpg"></div> <

Nginx實現404頁面的幾種方法，你知道幾種

一個網站專案，肯定是避免不了404頁面的，通常使用Nginx作為Web伺服器時，有以下集中配置方式，一起來看看。 第一種：Nginx自己的錯誤頁面 Nginx訪問一個靜態的html 頁面，當這個頁面沒有的時候，Nginx丟擲404，那麼如何返回給客戶端404呢？ 看下面的配置，這種情況下不需要修改

recyclerview實現瀑布流佈局

先看效果,這裡我用的背景圖片, 首先匯入依賴 compile 'com.android.support:recyclerview-v7:26.1.0' 下面就是程式碼,首先是佈局 activity_main <RelativeLayout xmlns:a

自定義UICollectionViewLayout實現瀑布流佈局

移動端訪問不佳，請訪問我的個人部落格 最近專案中需要用到瀑布流的效果，但是用UICollectionViewFlowLayout又達不到效果，自己動手寫了一個瀑布流的layout，下面是我的心路路程 因為是用UICollectionView來

SVM的實現多分類的幾種方法以及優缺點詳解

轉載自： SVM本身是一個二值分類器 　　SVM演算法最初是為二值分類問題設計的，當處理多類問題時，就需要構造合適的多類分類器。 　　目前，構造SVM多類分類器的方法主要有兩類 　　（1）直接法，直接在目標函式上進行修改，將多個分類面的引數求解合併到一個最優化

Python實現字串反轉的幾種方法

原文連結：https://www.cnblogs.com/taceywong/p/8045127.html面試遇到的一個特無聊的問題～～～要求：在Python環境下用盡可能多的方法反轉字串,例如將s = "abcdef"反轉成 "fedcba"第一種：使用字串切片result