0

*よくお読みください - 私は最初にコーディング例を使用しています - 次に、より説明的になるように実際のコードを使用しています *

イメージ名に基づいて、降順で div を並べ替えたいと思います。

これから変更：

<div id="content">
<p><img src="image/1.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/4.jpg"/></p>
<p><img src="image/2.jpg"/></p>
</div>

これへ

<div id="content">
<p><img src="image/4.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/2.jpg"/></p>
<p><img src="image/1.jpg"/></p>
</div>

ただし、ここではこのコードを使用して、「コンテンツ」div 内に画像を入力しています。ユーザーは毎日画像をアップロードしているため、これらの画像パスは以下のコードを使用して別のディレクトリからプルされています。そのコンテンツ div は自己入力する必要があります。

<script>
$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
var images = 'user-uploads-thumbnails/' + $(this).attr("href");
var linkimage = 'user-uploads/' + $(this).attr("href");
 //backup $('<p><a href="' + linkimage + '"><img src="' + images + '"></a></p>').appendTo('#content');
$('<p><a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"><img src="' + images + '"></a></p>').appendTo('#content');
     });
  }
});
</script>

以下のスクリプトは、URL を "content" div にハード コードした場合にのみ機能します。ただし、画像は毎日他のディレクトリに追加される予定であり、自己入力する必要があります。上記のスクリプトを使用してパスを取得すると ^^ 機能しません。 

<script>
function sort(container) {
    var images = [],
        paragraphs = container.getElementsByTagName('p');        
    while(!!paragraphs.length) {
        var p = paragraphs[0];
        images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
        container.removeChild(p);
    }
    images = images.sort();
    console.log(images);
    for(var i = images.length; i-- > 0;) {
        var p = document.createElement('p'),
            img = document.createElement('img');
            img.src = images[i];
            p.appendChild(img);
        container.appendChild(p);
    }
}

var container = document.getElementById('content');
sort(container);
</script>
4

3 に答える 3

1

すべてのコンテンツがAJAX呼び出しを介してロードおよび追加されると、「sort（container）」が呼び出されることを確認するのは良いことだと思います。

このようなもの：

$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
  var count = $(data).find("a:contains(.jpg)").length // storing total number of images
  $(data).find("a:contains(.jpg)").each(function(){
    // will loop through 
    var images = 'user-uploads-thumbnails/' + $(this).attr("href");
    var linkimage = 'user-uploads/' + $(this).attr("href");
    //backup $('<p><a href="' + linkimage + '"><img src="' + images + '"></a></p>').appendTo('#content');
    $('<p><a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"><img src="' + images + '"></a></p>').appendTo('#content');

    if (!--count) sort(container); // calling sort after everything is loaded
   });
 }
});
于 2012-11-01T00:38:53.540 に答える
1

私はあなたのサイトを見ました。

ポイントNo1。

readyドキュメントイベントで JavaScript をラップします。（グーグルで理由を見つけてください）

ポイントNo.2。

石積みが必要ない場合は、次のようにコメントしてください

/*$(function() {
  $(window).load(function(){
    $('#content').masonry();
  });*/

好きじゃない

//$(function() {
  $(window).load(function(){
    $('#content').masonry();
  });

ソートコードは

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
    $.ajax({
        url: "user-uploads-thumbnails",
        success: function(data){
            var imageNames = [];
            $(data).find("a:contains(.jpg)").each(function(){
                // store each image name into array
                imageNames.push($(this).attr("href"));
               });
            //imagenames array is ~ 
            //['1351732586.jpg' ,'1351732519.jpg' ,'1351732583.jpg' ,'1351732473.jpg' ....]
            var sortedImageNames = imageNames.sort();
            //sortedImageNames array is ~ 
            //["1351732473.jpg", "1351732519.jpg", "1351732583.jpg", "1351732586.jpg" ....]
            //In for loop we take from last image to first Image for DESC order
            for(var i = sortedImageNames.length; i-- > 0;) {
                    var linkImage = 'user-uploads/' + sortedImageNames[i];
                    var thumbnailImage = 'user-uploads-thumbnails/' + sortedImageNames[i];
                    var item = '<p><a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img src="' 
                        + thumbnailImage 
                        + '"></a></p>';
                    $(item).appendTo('#content');
                }
            //Apply fancybox to these Elements
            $('.fancybox').fancybox();
            }
        });
    });
</script>

これはテストされていません。

于 2012-11-01T02:54:16.850 に答える
0

#content divがajaxを介してロードされた後は、毎回コンテナーをソートする必要があります。sort(container);ajax成功コールバックのすべてのコンテンツの追加が完了したら、追加するだけ です。

<script>
$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
    // will loop through 
var images = 'user-uploads-thumbnails/' + $(this).attr("href");
var linkimage = 'user-uploads/' + $(this).attr("href");
 //backup $('<p><a href="' + linkimage + '"><img src="' + images + '"></a></p>').appendTo('#content');
$('<p><a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"><img src="' + images + '"></a></p>').appendTo('#content');
 });

sort(container); // sort after loading the content

 }
});
</script>
于 2012-11-01T00:37:19.053 に答える