Heim > Artikel > Web-Frontend > Implementierung des jQuery HTML5 Beauty-Wasserfall-Flow-Layouts method_jquery

Implementierung des jQuery HTML5 Beauty-Wasserfall-Flow-Layouts method_jquery

WBOYOriginal: 2016-05-16 15:38:371709Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des jQuery HTML5 Beauty Waterfall Flow-Layouts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine JavaScript- und HTML5-Implementierung eines Beauty-Wasserfall-Flow-Layouts. Diese Methode besteht darin, den Pfad des Bildes in ein JS-Array zu schreiben, aber der Fokus scheint nicht hier zu liegen, sondern darauf, wie die Bilder automatisch angeordnet werden. Klicken Sie nach dem Ausführen dieses Beispiels auf die Schaltfläche „Wasserfalllayout laden“, um den Wasserfallanordnungseffekt der Bilder anzuzeigen. Ich hoffe, Sie können sich von diesem Code inspirieren lassen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-html5-mn-pb-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
<title>美女瀑布流</title>
<style type="text/css">
*{margin:0;padding:0}
div.section{overflow:hidden}
div.aside{width:225px;float:left;display:inline}
div.aside div.content{margin:5px;background:#666}
div.aside div.content img{width:205px;margin:5px;}
div.aside div.content div.imgcaption{margin:0 5px;line-height:20px}
</style>
</head>
<body>
<div class="section">
 <div class="aside"></div>
 <div class="aside"></div>
 <div class="aside"></div>
 <div class="aside"></div>
</div>
<button>加载瀑布流布局</button>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
var json=[
 {"text":"1","src":"images/1.jpg","height":"273"},
 {"text":"2","src":"images/2.jpg","height":"273"},
 {"text":"3","src":"images/3.jpg","height":"306"},
 {"text":"4","src":"images/4.jpg","height":"270"},
 {"text":"5","src":"images/5.jpg","height":"273"},
 {"text":"6","src":"images/6.jpg","height":"307"},
 {"text":"7","src":"images/7.jpg","height":"272"},
 {"text":"8","src":"images/8.jpg","height":"285"},
 {"text":"9","src":"images/9.jpg","height":"303"},
 {"text":"10","src":"images/10.jpg","height":"272"},
 {"text":"11","src":"images/5.jpg","height":"273"},
 {"text":"12","src":"images/7.jpg","height":"273"},
 {"text":"13","src":"images/3.jpg","height":"280"}
]
function getSmallDiv(wrap,oD){
 var len=oD.length;
 var h=Infinity;
 var getD;
 for(var i=0;i<len;i++){
  if(oD.eq(i).height()<h){
   h=oD.eq(i).height();
   getD=oD.eq(i);
  }
 }
 return getD;
}  
$("button").click(function(){
 for(var i=0;i<json.length;i++){
  var str;
  str="<div class=\"content\">";
  str+="<img src="+json[i].src+" height="+json[i].height+" alt=\"\" />";
  str+="<div class=\"imgcaption\">"+json[i].text+"</div>";
  str+="</div>";
  getSmallDiv($(".section"),$(".aside")).append(str);
 }
});
</script>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS implementiert supereinfache QQ-ähnliche Faltmenü-Effekt_Javascript-FähigkeitenNächster Artikel：JS implementiert supereinfache QQ-ähnliche Faltmenü-Effekt_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen