瀑布流載入圖片

阿新 • • 發佈：2018-11-03

這個效果大家見過很多了在百度搜索圖片的時候下面補上我學習的製作這個的過程當然圖片是從別的地方抓取的或者在資料庫中讀取的我這裡只是放在了一個json裡面作為表示。廢話不多說上程式碼

css部分
 <title>瀑布流效果</title>
  <style type="text/css">
    *{margin:0;padding:0;}
    body{background:#f3f2f3;}
    .pic{width:1000px;margin:0 auto;}
    .pic .list{width:248px;text-align 
:center;float:left;}
  </style>
   <link type="text/css" rel="stylesheet" href="css/animate.min.css">

HTML部分
<body onload="initLoad();">


     <div class="pic">
        <div class="list"></div>
        <div class="list"></div>    
        <div class="list" 
></div>
        <div class="list"></div>        
     </div>

jq部分
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     <script type="text/javascript">
        var json = [
        {"src":"images/1.jpg","alt":"豪車","height":"340"},
        {"src" 
:"images/2.jpg","alt":"豪車","height":"310"},
        {"src":"images/3.jpg","alt":"豪車","height":"360"},
        {"src":"images/4.jpg","alt":"豪車","height":"340"},
        {"src":"images/5.jpg","alt":"豪車","height":"330"},
        {"src":"images/6.jpg","alt":"豪車","height":"340"},
        {"src":"images/7.jpg","alt":"豪車","height":"360"},
        {"src":"images/8.jpg","alt":"豪車","height":"340"},
        {"src":"images/9.jpg","alt":"豪車","height":"360"},
        {"src":"images/10.jpg","alt":"豪車","height":"340"},
        {"src":"images/11.jpg","alt":"豪車","height":"340"},
        {"src":"images/12.jpg","alt":"豪車","height":"345"},
        {"src":"images/13.jpg","alt":"豪車","height":"336"},
        {"src":"images/14.jpg","alt":"豪車","height":"340"},
        {"src":"images/15.jpg","alt":"豪車","height":"340"},
        {"src":"images/16.jpg","alt":"豪車","height":"331"}
        ];

        //迴圈迭代圖片陣列,解析json物件
        function initLoad(){
            for(var i = 0;i < json.length;i++){
                var car = "";
                car+= '<div class="car animated bounceIn">';
                car+= '<img src="'+json[i].src+'" width="240" height="'+json[i].height+'" alt="'+json[i].alt+'" />';
                car+= '</div>';
                //呼叫方法 拼接物件上去
                getListDiv($(".list")).append(car);
            };  
        };

        //獲取list div 物件，進行不規則佈局
        function getListDiv(obj){
            //獲取總列數
            var length = obj.length; 
            //高度無窮大
            var h = Infinity;
            //獲取每一列
            var getList;
            for(var i = 0;i < length;i++){
                //如果當前列小於無窮大 就無線迴圈
                if(obj.eq(i).height() < h){
                    h = obj.eq(i).height();
                    getList = obj.eq(i);
                }
            }
            return getList;
        };

        //滾動條的高度
        var scrollHeight = 0;
        //滾動條距離頂部的高度
        var scrollTop = 0;
        //頁面一載入就執行此函式
        $(function(){
            //瀏覽器的高度
            var _height = $(window).height();
            //滑鼠滾動事件
            $(window).scroll(function(){
                scrollHeight = document.body.scrollHeight;
                scrollTop = document.body.scrollTop;
                //滾動條+瀏覽器的高度 大於
                if(scrollTop + _height >= scrollHeight){
                    initLoad();
                }
            });
        });
     </script>

好了大功告成!oye

瀑布流載入圖片

這個效果大家見過很多了在百度搜索圖片的時候下面補上我學習的製作這個的過程當然圖片是從別的地方抓取的或者在資料庫中讀取的我這裡只是放在了一個json裡面作為表示。廢話不多說上程式碼 css部分 <title>瀑布流效果</title> &l

RecyclerView瀑布流載入圖片實現

先寫好RecyclerView的介面卡. public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.MyViewHolder> { priv

“瀑布流式”圖片懶載入程式碼示例

最近專案使用到了“懶載入”，現在更新一般，因為平時主要使移動端的開發所以庫檔案使用的是zepto.js 。當然也可以和jQuery 通用。程式碼如下： /** * Created by zhiqiang on 2015/10/14. * [email&

使用原生js實現瀑布式載入圖片

1、首先設定好容器，每張圖片的寬度設定為固定寬度，高度自適應 <div id="main"> <div class="box"> <img src="images/0.jpg" /> </div>

[置頂] RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？我們知道，要讓RecyclerView有瀑布流效果，R

js結合jquery實現的ajax瀑布流載入例項

一.js程式碼 ajax函式 //瀑布流資料 var getData = function (i,url,name){ $.post(url,{p:i},function(data){ if(data.status){

基於bmob瀑布流：圖片加文字的實現方式

最近總算有空了，可以寫一下之前自己學習bmob的一些收穫，延續上篇的工作展開說明。上一篇我們實現了瀑布流，進一步的我們又想實現圖片加文字卡片式的瀑布形式，由於自己是第一次涉及，初次想到了用畫布的

RecyclerView實現瀑布流，圖片自適應高度

話不多說，先上效果圖對於RecyclerView，相信大家都不陌生了，這個集listView，GridView，瀑布流效果與一身強大控制元件，漸漸地滲透在每個App.... 還是回到正題，如何讓RecyclerView裡的圖片自適應高度？我們知道，要讓Recycler

Masonry（瀑布流外掛）和 Imagesloaded（圖片載入外掛）

<div class="pull"> <div class="pullBox"><img src="img/1.jpg" alt=""></div> <div class="pullBox"><img src="img

RecycleView 瀑布流及glide網路載入圖片

package com.example.recycleview_jinjie; //第一步 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.s

Android 瀑布流遇到的各種問題(item移動，載入更多圖片閃爍，以及定製各種型別Header和Footer)

轉載地址：http://blog.csdn.net/windows771053651/article/details/51596744 功能：圖片瀑布流問題1：如何保持已顯示過的imageview的尺寸解決方法：定義一個HashMap<Integer,

Android中Recyclerview使用13----實現瀑布流遇到的各種問題(item移動，載入更多圖片閃爍，以及定製各種型別Header和Footer)

功能：圖片瀑布流問題1：如何保持已顯示過的imageview的尺寸解決方法：定義一個HashMap<Integer, Float> indexMap = new HashMap<Integer, Float>();用來儲存已顯示過的Ima

IOS開發之非同步載入網路圖片並快取本地實現瀑布流（一）

</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中，我寫了一個瀑布流照片牆的程式，由於之前的程式載入的圖片是本

#學習筆記#(28)+JS瀑布流-滾動條下拉載入圖片

waterfall.html <html> <head> <title>瀑布流佈局</title> <meta charset="gb2312"/> <link type="text/css"

vue實現網路圖片瀑布流 + 下拉重新整理 + 上拉載入更多

一、思路分析和效果圖　　用vue來實現一個瀑布流效果，載入網路圖片，同時有下拉重新整理和上拉載入更多功能效果。然後針對這幾個效果的實現，捋下思路：根據載入資料的順序，依次追加標籤展示效果；選擇哪種方式實現瀑布流，這裡選擇絕對定位方式；關鍵問題：由於每張圖片的寬高不一樣，而瀑布流中要求所有圖

瀑布流 ajax 預載入 json

clear ase ans site 使用 jquery visio inner lock pbl.json【模擬後臺json數據】: [ { "id": "511895", "title": "Smashicons: 300

ajax抓取網站接口圖片瀑布流筆記

ajax抓取網站接口圖片瀑布流筆記用php結合ajax來實現去其它網站抓取圖片，在自己本地用！ajax代碼部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

Android 解決RecyclerView瀑布流效果結合Glide使用時圖片變形的問題

變形 into 想要 pla enter glide加載圖片 pan etc clas 問題描述：使用Glide加載RecyclerView的Item中的圖片，RecyclerView使用了瀑布流展示圖片，但是滾動時圖片會不斷的加載，並且大小位置都會改變，造成顯示錯亂。

前端之masonry（圖片瀑布流插件）

IT left window con mar 什麽 lse 我們 anim 加載代碼： 1 2 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js">

Vue 原生瀑布流圖片

效果思路 1、html中建立四個“管道” 2、後臺獲取到資料 3、遍歷資料，獲取高度最小的管道，填入資料 4、滾動條到底時觸發函式，獲取下一頁資料，然後再執行步驟3 參考 jquery實現滑動到底部載入下一頁的資料程式

瀑布流載入圖片

相關推薦