Maison > interface Web > js tutoriel > Implémentation d'une disposition de flux en cascade basée sur jquery_jquery

Implémentation d'une disposition de flux en cascade basée sur jquery_jquery

WBOY
Libérer: 2016-05-16 15:23:14
original
1233 Les gens l'ont consulté

L'exemple de cet article présente le code clé pour implémenter la disposition du flux en cascade basée sur jquery et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

Rendu :

Code spécifique :

En utilisant jquery-1.8.3.min.js, le code Waterfall.js est le suivant :

$( window ).load( function(e){
  waterfall();
  var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]};
  $(window).scroll(function(){
    if( checkscrollside() ){
      $.each( dataInt.data, function(index,value){
        var $oPin = $('<div>').addClass('pin').appendTo( $("#main") );
        var $oBox = $('<div>').addClass('box').appendTo( $oPin );
        $('<img>').attr('src','./images/' + $(value).attr('src')).appendTo( $oBox );
      });
      waterfall();
    }
  });
  function waterfall(){
    var $aPin = $( "#main>div" );
    var iPinW = $aPin.eq(0).outerWidth();
    var num = Math.floor( $(window).width() / iPinW );
    $( "#main" ).css({
      'width' : iPinW * num,
      'margin' : '0 auto'
    });

    var pinHArr = [];
    $aPin.each(function( index, value ){
      var pinH = $aPin.eq( index ).height();
      if( index < num ){
        pinHArr[ index ] = pinH;
      }else{
        var minH = Math.min.apply( null, pinHArr );
        var minHIndex = $.inArray( minH, pinHArr );
        $( value ).css({
          'position': 'absolute',
          'top': minH + 15,
          'left': $aPin.eq( minHIndex ).position().left
        });
        pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;
      }
    });
  }
  function checkscrollside(){
    var $aPin = $("#main>div");
    var lastPinH = $aPin.last().get(0).offsetTop + Math.floor( $aPin.last().height()/2);
    var scrollTop = $( window ).scrollTop();
    var documentH = $( document ).height();
    return (lastPinH < scrollTop + documentH ) &#63; true : false;
  }
});
Copier après la connexion

J'espère que cet article sera utile à votre étude, merci d'avoir lu.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal