使用Swiper库实现从右向左排列的列表块

改变Swiper JS库提供的demo方式(170-slides-per-column.html)，从右向左排列表，然后从左向右滑动查看。提供的demo是从左向右排列的，如果使用float那都排在一行，到了宽度边界自动这行，这不是想要的结果，所以利用Swiper 4.0.6库现有的方式可以快速实现。

首先需要将Swiper库的源码做个小小的改动(大致在1300行)，不影响升级，但升级后没有改的话只是回到从左向右排：

// Calc slides
var slideSize;
var slidesPerColumn = params.slidesPerColumn;
var slidesPerRow = slidesNumberEvenToRows / slidesPerColumn;
var numFullColumns = slidesPerRow - ((params.slidesPerColumn * slidesPerRow) - slidesLength);
for (var i = 0; i < slidesLength; i += 1) {
    slideSize = 0;
    var slide = slides.eq(i);
	/*
	 * 修改之一
	 * 将 params.slidesPerColumn > 1 改成 >= 1
	 * 此处可不修改，只是当 slidesPerColumn 等于 1 时反向排无效
	 */
    if (params.slidesPerColumn >= 1) {
      // Set slides order
      var newSlideOrderIndex = (void 0);
      var column = (void 0);
      var row = (void 0);
      if (params.slidesPerColumnFill === 'column') {
        column = Math.floor(i / slidesPerColumn);
        row = i - (column * slidesPerColumn);
        if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) {
          row += 1;
          if (row >= slidesPerColumn) {
            row = 0;
            column += 1;
          }
        }
        newSlideOrderIndex = column + ((row * slidesNumberEvenToRows) / slidesPerColumn);
		/*
		 * 修改之二
		 * 添加下面一行代码
		 * params.antitone 这个属性是自定义的，如果不为 true 则使用默认方式
		 */
        newSlideOrderIndex = params.antitone ? 0 - (column - ((row * (slidesNumberEvenToRows ? slidesNumberEvenToRows : 1)) / slidesPerColumn)) : newSlideOrderIndex;
		
        slide
          .css({
            '-webkit-box-ordinal-group': newSlideOrderIndex,
            '-moz-box-ordinal-group': newSlideOrderIndex,
            '-ms-flex-order': newSlideOrderIndex,
            '-webkit-order': newSlideOrderIndex,
            order: newSlideOrderIndex,
          });
      } else {
        row = Math.floor(i / slidesPerRow);
        column = i - (row * slidesPerRow);
      }
      slide
        .css(
          ("margin-" + (swiper.isHorizontal() ? 'top' : 'left')),
          (row !== 0 && params.spaceBetween) && (((params.spaceBetween) + "px"))
        )
        .attr('data-swiper-column', column)
        .attr('data-swiper-row', row);
    }
	//...后面代码省略
}

接下来在实例化这个库时，将DOM处理一下，因为生成的列表数据不一定都是刚好满格的，下面上代码，

这个demo只修改了JS，对HTML和CSS没动，可以改变列表的行数或 slidesPerColumn 数值就能看到变化：

  
  
  

  
  

  
  


  
  

    

      
Slide 1
      
Slide 2
      
Slide 3
      
Slide 4
      
Slide 5
      
Slide 6
      
Slide 7
      
Slide 8
      
Slide 9
      
Slide 10
    
    
    
  

  
  

  
  

很轻松的实现反向滑动和显示，即使以后Swiper.js升级后忘了改这段也不影响页面结构。